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刘 博 文 


网 名 Berwin，95 后 ， 从 事 Web 前 端 
工作 5 年 ，2015 年 加 入 360 奇 舞 团 ， 现 任 
360 导 航 事业 部 资深 前 端 工 程 师 ， 负 责 
360 导 航 首 页 及 二 级 页 创新 项 目 等 亿 级 
PV 站 点 的 设计 与 优化 ， 推 动 Vue.js 成 为 
部 门 内 广泛 使 用 的 核心 技术 栈 ， 独 立 研发 
相关 开发 工具 与 技术 解决 方案 并 使 之 成 功 
落地 。 

W3C 性 能 工作 组 成 员 ， 在 Web 性 能 
领域 有 深入 研究 。 热 爱 开源 ， 热 爱 技术 ， 
梦想 是 用 技术 改变 世界 。 个 人 GitHub 地 
址 : https://github.com/berwin。 
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内 容 提要 


本 书 从 源码 层面 分 析 了 Vuejs。 首 先 ， 简 要 介绍 了 Vuejs ; 接着 详细 讲解 了 其 内 部 核心 技术 “变化 侦 测 ” 


并 带领 大 家 从 0 到 1 实现 一 个 简单 的 “变化 侦 测 ”系统 ; 然后 详细 介绍 了 虚拟 DOM 技术 ， 甚 中 包括 虚拟 


DOM 的 原理 及 其 patching 算法 ; 再 后 详细 讨论 了 模板 编译 技术 ， 其 中 包括 模板 解析 器 的 实现 原理 、 优 化 
器 的 原理 以 及 代码 生成 器 的 原理 ; 最 后 详细 介绍 了 其 整体 架构 以 及 提供 给 我 们 使 用 的 各 种 API 


同时 还 介绍 了 生命 周期 、 错 误 处 理 、 指 令 系 统 与 模板 过 滤器 等 功能 


本 书 适合 前 端 开发 人 员 阅 读 。 
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的 内 部 原理 ， 


近 几 年 


序 二 


，JavaScript 的 流行 库 和 框架 带 有 元 编程 (metaprogramming ) 的 特征 。 所 谓 元 编程 ， 


简单 来 说 ,是 指 框架 的 作者 使 用 一 种 编程 语言 回 有 的 语言 特性 , 创造 出 相对 新 的 语言 特性 , 使 得 


最 终 使 用 者 
发 体验 。 


早期 的 


能 够 以 新 的 语法 和 语义 来 构建 他 们 的 应 用 程序 , 从 而 在 某 些 领域 开发 中 获得 更 好 的 开 


jQuery 库 之 所 以 获得 开发 者 们 的 认可 ， 很 大 程度 上 是 因为 它 独创 的 链 式 语法 和 隐 式 


迭代 语义 。 尽 管 jQuery 仅仅 通过 巧妙 设计 API 就 能 支持 上 述 特性 ， 并 不 依赖 于 编程 语言 赋予 的 


元 编程 能 力 


， 但 是 毫 无 疑问 ， 它 以 一 种 精巧 的 设计 理念 和 思路 ， 为 JavaScript 库 和 框架 的 设计 者 


打开 了 一 扇 创 新 的 大 门 。 


今天 的 


Web 产品 对 构建 用 户 界 面 的 要 求 越 来 越 高 ，jQuery 的 方式 不 能 满足 构建 复杂 用 户 界 


面 的 需要 ， 新 的 UI 框架 快速 发 展 ， 其 中 一 个 最 流行 的 框架 就 是 Vue.js。 与 jQuery 相 比 ，Vue.js 
更 强大 , 也 具有 更 加 明显 的 元 编程 特征 。 动 态 绑 定 属性 和 变化 侦 测 、 内 置 模 板 和 依赖 于 模板 语法 


的 声明 式 泻 


染 、 可 扩展 的 指令 、 支 持 府 套 的 组 件 ， 这 些 原生 JavaScript 并 不 具备 的 特征 和 能 力 被 


一 一 融入 , 框架 的 使 用 者 在 使 用 Vuejs 开发 Web 应 用 时 , 事实 上 获得 了 超越 JavaScript 原生 语言 


特性 的 能 力 


O 


尽管 Vuejs 框架 赋予 开发 者 众多 特性 和 能 力 ,但 它 仍然 是 使 用 原生 JavaScript 实现 的 应 用 框架 。 


JavaScript 自 


身 提 供 了 许多 元 编程 特性 ， 比 如 从 ES5 就 开始 支持 的 属性 访问 器 ( property accessor ) ， 


ES6 支持 的 代理 ( proxy ) ， 还 有 标准 提案 已 经 处 于 Stage 3 阶段 的 装饰 需 ( decorator ) 。 基 于 这 


些 语言 特性 


开发 者 能 够 更 加 得 心 应 手 地 使 用 框架 开发 出 优雅 、 简 洁 的 应 用 程序 模块 。 


， 我 们 能 够 比较 方便 地 扩展 新 的 语言 特性 , 将 这 些 特性 融入 应 用 框架 ,从 而 使 得 应 用 


如 何 设 计 API 和 如 何 使 用 元 编程 思想 将 新 特性 融入 到 框架 中 ， 是 现代 JavaScript 框架 设计 的 
两 个 核心 ，Vuejs 更 侧重 于 后 者 。 理 解 元 编程 思想 有 助 于 深刻 理解 Vuejs 的 本 质 。 而 理解 元 编程 


思想 本 身 最 好 的 方法 又 是 通过 深入 研究 Vuejs 的 源码 ,因为 元 编程 思想 一 旦 涉及 具体 实现 , 不 仅 


仅 是 使 用 JavaScirpt 提供 的 特性 来 扩展 能 力 那 么 简单 ， 这 其 中 有 许多 细节 需要 考虑 ， 比 如 要 做 到 


向 下 兼容 , 那么 就 要 对 一 些 特性 的 实现 方式 做 出 取舍 , 一 些 语言 能 力 可 以 通过 书写 向 下 兼容 代码 
来 弥补 ,而 男 一 些 则 需要 通过 编译 机 制 来 做 到 ,还 有 一 些 则 必须 舍弃 ; 同样 ， 基 于 性 能 考虑 ， 一 


些 特性 也 可 


能 需要 做 出 一 定 的 修改 或 妥协 。 这 些 问 题 不 仪 在 框架 设计 和 实现 的 过 程 中 会 遇 到 , 而 


2 序 一 


且 在 具体 实现 应 用 程序 的 过 程 中 也 会 遇 到 。 因 此 ， 通 过 学 习 Vuejs， 我 们 不 仅 能 够 掌握 设计 应 用 
程序 框架 的 一 般 性 技巧 ， 还 可 以 在 实现 应 用 程序 时 运用 其 中 的 具体 设计 思想 和 方法 论 。 


本 书 的 作者 刘 博 文 是 我 的 同事 ,也 是 奇 舞 团 的 一 员 ， 后 来 由 于 业务 变动 , 博文 所 在 的 团队 从 
奇 舞 团 独立 了 出 去 ,但 是 同 为 360 的 前 端 团队 ,我 们 也 始终 保持 着 项 目 合作 和 技术 交流 。 很 早 就 
听 到 博文 要 写 这 样 一 本 书 , 当时 我 很 高 兴 , 我 一 直 鼓 励 大 家 写 书 , 因为 这 种 创作 既 能 使 自己 成 长 ， 
又 能 使 读者 获 益 。 我 自己 也 写 过 技术 类 的 书 ， 深 知 技术 创作 的 不 易 ,， 要 把 Vuejs 这 样 的 流行 框架 
讲 透 也 着 实 需要 下 一 番 苦 功 。 有 时 候 , 作为 朋友 , 我 会 和 博文 开玩笑 , 说 他 的 书 再 不 出 版 ,Vue.js 
3.0 版 本 就 要 发 布 了 ， 但 这 仅仅 是 玩笑 ， 我 不 愿意 博文 因为 要 赶 出 版 时 间 而 草草 了 事 ， 那 样 就 无 
法 真正 做 到 “深入 浅 出 ”,， 毕竟 这 不 是 一 本 Vuejs 的 使 用 手册 ， 而 是 真正 能 够 透 过 Vuejs 的 设计 
思路 去 学 习 元 编程 思想 ， 并 将 这 种 思想 运用 于 程序 开发 中 的 书 。 只 有 这 样 ， 读 者 才能 真正 从 这 本 
书 中 获 益 。 我 想 ， 在 这 一 点 上 ， 博 文 没有 让 我 失望 ， 我 也 希望 这 本 书 没有 让 你 们 失望 。 


影 
360 奇 三 团团 长 
2019 年 2 月 1 日 


“ 奇 舞 团 ” 办 公 地 点 在 “南瓜 


序 


已 


和 


屋 ”7 层 ， 


层 的 时 候 路 过 
出 : 


导航 前 端 工 位 ， 梁 超 看 到 我 ， 
“ 谁 是 博文 ， 给 哪个 出 版 社 写 ? ” 
辑 ) 发 据 的 作者 。 当 时 听 到 这 个 消息 我 


高 兴 地 说 : 


航 前 端 在 “南瓜 屋 ”8 层 。2017 年 某 一 天 ， 我 去 8 
“ 李 老 师 ， 博 文正 在 写 书 呢 。” 我 脱口 而 
此 我 便 认 识 了 博文 ， 也 知道 了 他 是 王 军 花 ( 本 书 策划 编 
了 电 很 兴奋 , 知道 是 在 给 图 灵 写 书 , 而 我 又 在 图 灵 待 过 几 年 ， 


熟悉 图 灵 的 “套路 ”, 就 忍 不 住 当场 给 博文 分 享 了 一 些 选 题 和 写作 思路 。 听 着 我 滔滔 不 绝地 讲 “ 写 
书 经 ”， 博 文 频频 点 涉 ， 好 像 很 受 启发 的 样子 。 


2018 年 年 初 ，360 W3C 工作 组 成 立 , 博文 加 入 了 Web 忆 


能 工作 组 。 于 是 几乎 每 周 的 例会 上 ， 


我 都 会 问 问 博 文 新 书写 作 和 出 版 的 进度 。 时 值 年 未 , 这 本 书 终于 要 出 版 了 。 而 这 时 候 , 我 因为 支 


持 智能 音箱 项 目 临 时 搬 到 了 11 层 , 开发、 联 调 非常 繁 和 
我 能 不 能 帮 他 写 个 序 。 我 说 : 


私有 仓库 。 
两 周 来 ， 我 利 月 


亡 。11 月 16 日 下 午 ， 


博文 突然 在 微 信 上 问 


“你 能 不 能 先 给 我 看 看 书稿 ”然后 博文 把 我 加 到 了 他 GitHub 的 


日 空 暇 时 间 大 致 浏览 了 一 遍 书 稿 。 无 奈 时 间 紧 迫 ， 大 部 分 章节 来 不 及 细 读 。 一 


是 因为 公司 项 目 开发 进度 必须 保证 , 二 是 自己 还 有 一 个 字体 服务 的 项 目 在 并 行 迭代 。 虽然 大 部 分 
内 容 未 曾 细 读 , 但 仅 就 仔细 读 过 的 儿童 而 言 ， 着 实 让 我 受益 菲 浅 。 我 想 , 等 到 手头 的 项 目 开发 告 


一 段落 之 后 ， 


一 定 要 抽 时 间 重 新 研读 两 遍 。 没 错 ， 这 本 书 至 少 要 读 两 遍 以 上 。 


浏览 书稿 的 时 候 , 我 也 在 回忆 第 一 次 跟 博文 分 享 “ 写 书 经 ”的 情景 。 当 时 我 说 , 要 想 让 技术 


书 畅销 ,一 是 读者 定位 必须 是 新 手 ， 因 为 新 手 人 数 众 多 ; 二 是 要 注重 实用 , 书 中 的 例子 最 好 
即 照搬 到 项 目 上 。 然而 , 这 本 书 的 读者 定位 显然 不 是 新 手 ， 而 ] 


套 月 


到 项 目 上 。 其 实 这 也 是 没 办 法 的 事 ,因为 博文 写 这 本 书 的 初 囊 就 是 


昌 书 中 的 源码 分 析 似 乎 也 不 能 


全 已 


Be 


[ 接 


I 


UL 


自 


己 人 研究 Vue.js 源码 的 


心得 分 享 出 来 。 就 Vuejs 源码 分 析 而 言 ， 这 本 书 确 确实 实 是 非常 棒 的 。 反 正 我 是 爱不释手 。 


这 本 书 取 名 “深入 浅 出 ”是 名 副 其 实 的 。 因为 它 确实 有 相当 的 深度 , 而 且 语 
与 其 他 源 代码 分 析 类 的 技术 书 连篇 累 肤 地 堆砌 、 
这 本 书 里 很 少 看 到 超过 一 页 的 代码 片段 。 所 有 代码 片段 明显 都 被 
层 递 进 ， 加 上 了 “新 增 "” “修改 ”之 类 的 注 和 


最 重要 的 是 ， 


艰深 的 代码 逻辑 ， 
雳 用 


置疑，Vue.js 是 一 个 优秀 的 前 端 


举 。 几 加 


下 架 。 一 个 优秀 的 前 端 


和 以 明白 浅显 的 文字 和 配 
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[a] 


真 的 浅显 易 懂 。 


照搬 项 目 源 代码 的 做 法 截然 不 同 ， 
作者 精心 筛选 、 编 排 过 ， 而 


且 层 
图 ,原本 隐 星 、 抽 象 、 


瞬间 变 得 明白 易 履 ， 让 人 不 时 有 “原来 如 此 ”之 叹 ， 继 而 “拍手 称快 ”! 
E 架 如 果 没 有 一 本 优秀 的 解读 著 


2 序 ss 


作 , 确实 是 一 大 缺憾 。 应 该 说 , 本 书 正 是 一 本 优秀 的 Vuejs 源码 解读 专著 。 全 书 从 一 个 新 颖 的 “入 
口 点 ” “变化 侦 测 ”切入 ,逐步 过 渡 到 “虚拟 DOM” 和 “模板 编译 ”， 最 后 展开 分 析 Vue.js 
的 整体 架构 。 如 果 想 读 懂 这 本 书 , 读者 不 仅 要 有 一 些 Vuejs 的 实际 使 用 经 验 , 而且 还 要 有 一 些 编 
译 原理 ( 比如 AST ) 相关 的 知识 储备 , 这 样 才能 更 轻松 地 理解 模板 解析 、 优 化 与 代码 生成 的 原理 。 
本 书 最 后 几 章 对 Vuejjs 的 实例 方法 和 全 局 API， 以 及 生命 周期 、 指 令 和 过 滤器 的 解读 ,虽然 借鉴 
了 Vuejs 官方 文档 ， 但 作者 更 注重 实现 原理 的 分 析 ， 弥 补 了 文档 的 不 足 。 

虽然 本 书 不 是 写 给 新 手 看 的 , 但 鉴于 Vuejs 在 国内 的 用 户 基 数 巨大 , 我 对 它 的 销量 还 是 很 乐 
观 的。 这 些 年 来 ， 前 端 行业 一 直 在 飞速 发 展 。 行 业 的 进步 ， 导 致 对 从 业 人 员 的 要 求 也 不 断 攀 升 。 
放眼 未 来 ， 虽 然 仅 仅 会 用 某 些 框架 还 可 以 找到 工作 , 但 仅仅 满足 于 会 用 一 定 无 法 走 得 更 远 。 随 着 
越 来 越 多 “聪明 又 勤奋 ”的 人 加 入 前 端 行列 ， 能 和 否 洞悉 前 治 框架 的 设计 和 实现 将 会 成 为 高 级 人 才 
与 普通 人 才 的 “分 水 岭 ”。 

“ 欲 穷 千里 目 ， 更 上 一 层 楼 。” 我 衷心 希望 博文 这 本 用 心 之 作 ， 能 够 帮助 千 千 万 万 的 Vuejs 
用 户 从 “ 知 其 然 ” 跃 进 到 “ 知 其 所 以 然 ” 的 境界 。 最 后 想 说 一 句 ， 有 心 购买 本 书 的 读者 大 可 不 必 
纠结 于 Vuejs 的 版 本 问题 。 因为 优秀 源 代码 背后 的 思想 是 永恒 的 、 普 适 的 , 跟 版 本 没有 任何 关系 。 
早 一 天 读 到 ， 早 一 天 受益 ， 仪 此 而 已 。 
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时 至 今日 ，Vuejs 就 像 曾经 的 jQuery， 已 经 成 为 前 端 工程 师 必 备 的 技能 。 不 可 否认 ， 它 可 以 
极 大 地 提高 我 们 的 开发 效率 ， 并 且 很 容易 学 习 。 

这 就 造成 了 一 个 很 普遍 的 现象 , 大 部 分 前 端 工程 师 对 框架 以 及 第 三 方 周边 插件 的 关注 程度 越 
来 越 高 ， 甚 至 把 自己 全 部 的 关注 点 都 放 在 了 框架 上 。 

在 我 看 来 , 这 多 少 有 点 亚 健 康 , 不 是 很 利于 前 端 工程 师 的 技术 成 长 。 因 为 我 发 现 大 家 关注 杠 
架 时 ， 更 多 的 是 关注 其 用 法 (包括 框架 自身 、 第 三 方 插件 和 UI 组 件 库 等 ) 、 奇 淫 技 巧 和 最 佳 实 
勤 等 。 

而 我 希望 大 家 拿 出 一 部 分 精力 去 关注 框架 所 解决 的 问题 以 及 它 是 如 何 解决 这 些 问 题 的 。 这 有 
助 于 我 们 提升 自己 的 技术 和 解决 问题 的 能 

大 家 在 使 用 Vuejs 开发 项 目 时 , 不 免 总 会 遇 到 一 些 奇 奇怪 怪 的 问题 ， 而 我 们 是 否 能 很 快 解决 
这 些 问题 以 及 理解 这 些 问题 为 什么 会 发 生 ， 主 要 取决 于 对 Vuejs 原理 的 理解 是 否 足够 深入 。 


本 书目 的 


所 有 技术 解决 方案 的 终极 目标 都 是 在 解决 问题 ,都 是 先 有 问题 ,然后 有 人 解决 方案 。 解决 方 案 
可 能 并 不 完美 ， 也 可 能 有 很 多 种 。 
Vue.js 也 是 如 此 , 它 解决 了 什么 问题 ”如 何 解 决 的 ?解决 问题 的 同时 都 做 了 哪些 权衡 和 取舍 ? 
本 书 将 带领 大 家 透 过 现象 看 到 Vue.js 的 本 质 ， 通 过 本 书 ， 我 们 将 学 会 : 
口 Vuejjs 的 响应 式 原理 ， 理 解 为 什么 修改 数据 视图 会 自动 更 新 ; 
口 虚拟 DOM ( Virtual DOM ) 的 概念 和 原理 ; 
口 模板 编译 原理 ， 理 解 Vue.js 的 模板 是 如 何 生 效 的 ; 
口 Vue.js 整体 架构 设计 与 项 目 结构 ; 
口 深入 理解 Vue.jjs 的 生命 周期 ， 不 同 的 生命 周期 钩子 之 间 有 什么 区 别 ， 不 同 的 后 命 周 期 之 
间 Vuejjs 内 部 到 底 发 生 了 什么 ; 
口 Vue.js 提供 的 各 种 API 的 内 部 实现 原理 ; 
口 指令 的 实现 原理 ; 


口 过 滤 顺 的 实现 原理 ; 
口 使 用 Vue.js 开发 项 目的 最 佳 实践 。 


组 织 结构 

本 书 共 分 四 篇 ， 全 方位 讲解 了 Vuejs 的 内 部 原理 。 

口 第 一 篇 : 共 3 章 , 详细 讲解 了 Vuejs 内 部 核心 技术 “变化 侦 测 ”， 并 一 步 一 步 带领 大 家 

从 0 到 1 实现 一 个 简单 的 “变化 侦 测 ”系统 。 

口 第 二 篇 : 共 3 章 ， 详 细 介绍 了 虚拟 DOM 技术 ， 其 中 包括 虚拟 DOM 的 原理 及 其 patching 

算法 。 

D 第 三 篇 : 共 4 音 ， 详细 介 绍 了 模板 编译 技术 ， 其 中 包括 模板 解析 需 的 实现 原理 、 优 化 需 

的 原理 以 及 代码 生成 器 的 原理 。 

口 第 四 篇 : 这 是 本 书 占 比 最 大 的 一 部 分 ， 详 细 介绍 了 Vue.js 的 整体 架构 以 及 提供 给 我 们 使 
用 的 各 种 API 的 内 部 原理 。 同 时 还 对 Vue.js 的 生命 周期 、 错 误 处 理 、 指 令 系 统 与 模板 过 
滤器 等 功能 的 原理 进行 了 介绍 。 在 本 书 最 后 一 章 ， 我 们 为 大 家 提供 了 一 些 使 用 Vuejs 开 
发 项 目的 最 佳 实践 ， 这 些 内 容 中 一 大 部 分 是 Vue.js 官网 提供 的 ， 还 有 一 小 部 分 是 我 自己 
总 结 的 。 

在 撰写 本 书 时 ，Vue.js 的 最 新 版 本 是 2.5.2， 所 以 本 书 中 的 代码 参考 该 版 本 进行 撰写 。 如 果 你 
想 对 照 源码 来 阅读 本 书 ， 可 以 在 GitHub 上 找 出 该 版 本 的 源码 。 此 外 ， 关 于 本 书 的 任何 意见 和 建 
议 ， 都 可 以 在 这 里 讨论 : https://github.com/berwin/Blog/issues/34。 关 于 本 书 的 微 信和 群 ， 也 请 参见 
这 个 页 面 。 
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在 过 去 的 10 年 时 间 里 ， 网 页 变 得 更 加 动态 化 和 强大 了 。 通 过 JavaScript， 我 们 已 经 可 以 把 很 
多 传统 的 服务 端 代码 放 到 浏览 器 中 。 身 为 一 名 前 端 工程 师 ， 我 们 所 面临 的 需求 变 得 越 来 越 复 杂 。 

当 应 用 程序 开始 变 复 杂 后 ， 我 们 需要 频繁 操作 DOM。 由 于 缺乏 正规 的 组 织 形式 ， 我 们 的 代 
码 变 得 非常 难以 维护 。 

这 本 质 上 是 命令 式 操作 DOM 的 问题 ， 我 们 曾经 用 jQuery 操作 DOM 写 需 求 , 但 是 当 应 用 程 
序 变 复杂 后 , 代码 就 像 一 坨 意大利 面 一 样 , 有 点 难以 维护 。 我 们 无 法 继续 使 用 命令 式 操作 DOM ， 
所 以 Vuejs 提供 了 声明 式 操 作 DOM 的 能 力 来 解决 这 个 问题 。 

通过 描述 状态 和 DOM 之 间 的 映射 关系 ， 就 可 以 将 状态 泻 染 成 DOM 呈现 在 用 户 界 面 中 ,也 
就 是 演 染 到 网 页 上 。 


1.1 什么 是 Vue.js 


Vue.js, 通常 简称 为 Vue， 是 一 款 友 好 的 、 多 用 途 且 高 性 能 的 JavaScript 框架 , 能够 帮助 我 们 
创建 可 维护 性 和 可 测试 性 更 强 的 代码 。 它 是 目前 所 有 主流 框架 中 学 习 曲 线 最 平缓 的 框架 , 非常 容 
易 上 手 ， 其 官方 文档 也 写 得 非常 清晰 、 易 恒 

它 是 一 款 渐 进 式 的 JavaScript 框架 。 关 于 什么 是 渐进 式 ， 其 实 一 开始 我 琢磨 了 好 久 ， 后 来 才 
弄 懂 ,就 是 说 如 果 你 已 经 有 一 个 现成 的 服务 端 应 用 ,也 就 是 非 单 页 应 用 ,可 以 将 Vuejjs 作为 该 应 
用 的 一 部 分 虞 入 其 中 ， 带 来 更 加 丰富 的 交互 体验 。 

如 果 和 希望 将 更 多 业务 逻辑 放 到 前 端 来 实现 , 那么 Vuejs 的 核心 库 及 其 生态 系统 也 可 以 满足 你 
的 各 种 需求 。 和 其 他 前 端 框架 一 样 ，Vuejs 允许 你 将 一 个 网 页 分 割 成 可 复 用 的 组 件 ， 每 个 组 件 都 
有 自己 的 HTML、CSS 和 JavaScript 来 演 染 网 页 中 一 个 对 应 的 位 置 。 

如 果 要 构建 一 个 大 型 应 用 ， 就 需要 先 搭建 项 目 ， 配 置 一 些 开发 环境 等 。Vue.js 提供 了 一 个 命 
令 行 工具 ， 它 让 快速 初始 化 一 个 真实 的 项 目 工程 变 得 非常 简单 。 

我 们 甚至 可 以 使 用 Vuejjs 的 单 文件 组 件 ， 它 包含 各 自 的 HTML、JavaScript 以 及 带 作用 域 的 
CSS 或 SCSS。 我 本 人 在 使 用 Vuejs 开发 项 目 时 ， 通 常 都 会 使 用 单 文件 组 件 。 单 文件 组 件 真 的 是 


map 


[e) 
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一 个 非常 棒 的 特性 ， 它 可 以 使 项 目 架 构 变 得 非常 清晰 、 可 维护 。 


1.2 Vue.js 简 史 


2013 年 7 月 28 日, 有 一 位 名 叫 尤 雨 溪 , 英文 名 叫 Evan You 的 人 在 GitHub 上 第 一 次 为 Vuejs 
提交 代码 。 这 是 Vuejs 的 第 一 个 提交 (commit )， 但 这 时 还 不 叫 Vue.js。 从 仓库 的 package.json 文 
件 可 以 看 出 ， 这 时 的 名 字 叫 作 Element， 后 来 被 更 名 为 Seed.js。 

2013 年 12 月 7 日 , 尤 雨 溪 在 GitHub 上 发 布 了 新 版 本 0.6.0, 将 项 目 正 式 改 名 为 Vue.js, 并 且 
把 默认 的 指令 前 缀 变 成 v-。 这 一 版 本 的 发 布 ， 代 表 Vuejs 正式 问世 。 


2014 年 2 月 1 日 ， 尤 雨 溪 将 Vuejs 0.8 发 布 在 了 国外 的 Hacker News 网 站 ， 这 代表 它 首 次 公 
开发 布 。 听 尤 雨 溪 说 ， 当 时 被 顶 到 了 Hacker News 的 首页 , 在 一 周 的 时 间 内 拿 到 了 615 个 GitHub 
的 star， 他 特别 兴 


从 这 之 后 ， 经 过 近 两 年 的 镶 化 ， 直 到 2015 年 10 月 26 日 这 天 ，Vue.js 终于 迎 来 了 1.0.0 版 本 
的 发 布 。 我 不 知道 当时 尤 雨 溪 的 心情 是 什么 样 的 , 但 从 他 发 布 版 本 时 所 带 的 格言 可 以 看 出 ,他 心 
里 一 定 很 复杂 。 

那 句 话 是 : 

“The fate of destruction is also the joy of rebirth.” 

翻译 成 中 文 是 : 

毁灭 的 命运 ， 也 是 重生 的 喜悦 。 
并 且 为 1.0.0 这 个 版 本 配备 了 一 个 代号 ， 叫 新 世纪 福音 战士 (Evangelion )， 这 是 一 部 动画 片 
的 名 字 。 事 实 上 ，Vue.js 每 一 次 比较 大 的 版 本 发 布 ， 都 会 配 一 个 动画 片 的 名 称 作为 代号 。 

2016 年 10 月 1 日 ， 这 一 天 是 祖国 的 生日 ， 但 同时 也 是 Vuejs 2.0 发 布 的 日 子 。Vue.js 2.0 的 
代号 叫 攻 壳 机 动 队 (Ghost in the Shell )。 


同时 ， 这 一 次 尤 雨 溪 发 布 这 个 版 本 时 所 带 的 格言 是 : 
“Your effort to remain what you are is what limits you.” 
翻译 成 中 文 是 : 
保持 本 色 的 努力 ， 也 在 限制 你 的 发 展 。 
在 开发 Vuejjs 的 整个 过 程 中 ， 它 的 定位 发 生 了 变化 ， 一 开始 的 定位 是 : 
“Just a view layer library” 


就 是 说 ， 最 早 的 Vuejs 只 做 视图 层 , 没有 路 由 ,没有 状态 管理 ， 也 没有 官方 的 构建 工具 ， 只 有 一 
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个 库 ， 放 在 网 页 里 就 直接 用 。 

后 来 , 他 发 现 Vuejs 无 法 用 在 一 些 大 型 应 用 上 , 这样 在 开发 不 同 大 小 的 应 用 时 , 需要 不 停 地 
切换 框架 以 及 思维 模式 。 尤 雨 溪 希望 有 一 个 方案 ， 有 足够 的 灵活 性 ， 能 够 适应 不 同 大 小 的 应 用 

所 以 ，Vuejs 就 慢 慢 开 始 加 入 了 一 些 官方 的 辅助 工具 ， 比 如 路 由 (Router )、 状 态 管理 方案 
( Vuex ) 和 构建 工具 〈vue-cli ) 等 。 

加 入 这 些 工 具 时 ，Vuejs 始终 维持 着 一 个 理念 :“ 这 个 框架 应 该 是 渐进 式 的 。 

这 时 Vue.js 的 定位 是 : 

The Progressive Framework 

翻译 成 中 文 ， 就 是 渐进 式 框架 。 

所 谓 渐进 式 框架 ， 就 是 把 框架 分 层 。 

最 核心 的 部 分 是 视图 层 演 染 ， 然后 往外 是 组 件 机 制 , 在 这 个 基础 上 再 加 入 路 由 机 制 , 再 加 入 
状态 管理 ， 最 外 层 是 构建 工具 ， 如 图 1-1 所 示 。 


图 1-1 框架 分 层 


所 谓 分 层 , 就 是 说 你 既 可 以 只 用 最 核心 的 视图 层 演 染 功能 来 快速 开发 一 些 需 求 , 也 可 以 使 用 
一 整套 全 家 桶 来 开发 大 型 应 用 。Vue.js 有 足够 的 灵活 性 来 适应 不 同 的 需求 ， 所 以 你 可 以 根据 自己 
的 需求 选择 不 同 的 层级 。 
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Vue.js 2.0 与 Vue.js 1.0 之 间 内 部 变化 非常 大 ， 整 个 演 染 层 都 重 写 了 ,但 API 层面 的 变化 却 很 
小 。 可 以 看 出 ，Vue.js 是 非常 注重 用 户 体 验 和 学 习 曲 线 的 ， 它 尽量 让 开发 者 用 起 来 很 爽 ， 同 时 在 
应 用 场景 上 ,其 他 框架 能 做 到 的 Vuejs 都 能 做 到 , 不 存在 其 他 框架 可 以 实现 而 Vuejjs 不 能 实现 这 
样 的 问题 , 所 以 在 技术 选 型 上 上， 只 需要 考虑 Vuejjs 的 使 用 方式 是 不 是 符合 口味 ,团队 来 了 新 同学 
能 和 否 快 速 融 入 等 问题 。 由 于 无 论 是 学 习 曲 线 还 是 API 的 设计 上 ，Vue.js 都 非常 优雅 ， 所 以 它 具 有 
很 强 的 竞争 力 。 

Vue.js 2.0 引入 了 非常 多 的 特性 ， 其 中 一 个 明显 的 效果 是 Vue.js 变 得 更 轻 、 更 快 了 。 

Vue.js 2.0 引 入 了 虚拟 DOM， 其 演 染 过 程 变 得 更 快 了 。 虚 拟 DOM 现在 已 经 被 网 上 说 烂 了 ， 
但 是 我 想 说 的 是 ， 不 要 人 云 亦 云 。Vuejs 引入 虚拟 DOM 是 有 原因 的 。 事 实 上 ， 并 不 是 引入 虚 拟 
DOM 后 ， 演 染 速 度 变 快 了 。 准 确 地 说 ， 应 该 是 80% 的 场景 下 变 得 更 快 了 ， 而 剩 下 的 20% 反而 
变 慢 了 。 

任何 技术 的 引入 都 是 在 解决 一 些 问题 ， 而 通常 解决 一 个 问题 的 同时 会 引发 另外 一 个 问题 ， 这 
种 情况 更 多 的 是 做 权衡 , 做 取舍 。 所 以 , 不 要 像 网 上 大 部 分 人 那样 , 成 天 说 因为 引入 了 虚拟 DOM 
而 变 快 了 。 我 们 要 透 过 现象 看 本 质 ， 本 书 的 目的 也 在 于 此 。 

关于 为 什么 引入 虚拟 DOM， 以 及 为 什么 引入 虚拟 DOM 后 演 染 速度 变 快 了 ,第 5 章 会 详细 


除了 引入 虚拟 DOM 外 ,Vuejs 2.0 还 提供 了 很 多 令 人 激动 的 特性 ,比如 支持 JSX 和 TypeScript， 
支持 流 式 服务 端 泻 染 ， 提 供 了 路 平台 的 能 力 等 。 

到 目前 ,我 写 下 这 行文 字 的 时 间 是 2018 年 6 月 29 日 ，Vuejs 的 最 新 版 本 是 2.5.16。 就 在 前 
几 天 ， 它 在 GitHub 上 的 star 数量 已 经 超过 了 10 万 ， 同 时 超越 了 React 在 GitHub 上 的 star 数量 。 
在 GitHub 上 所 有 项 目 (所 有 语言 ) 中 排 进 了 前 五 ， 目 前 是 第 4 名 ， 挤 进 前 三 指日可待 。 可 能 你 
在 读 这 行文 字 的 时 候 ，Vue.js 已 经 挤 进 前 三 了 。 

目前 , Vue.js 每 个 月 有 超过 115 万 次 NPM 下 载 , Chrome 开发 者 插件 有 17.4 万 周 活跃 用 户 ( 这 
是 2017 年 5 月 的 数据 ， 现 在 可 能 会 更 多 )， 这 表示 每 天 都 有 17.4 万 的 人 在 使 用 它 开发 应 用 。 

Vue.js 在 国内 的 用 户 有 阿里 巴巴 、 腾 讯 、 百 度 、 新 浪 、 网 易 、 饭 了 么 、 沉 滴 出 行 、360、 美 
、 苏 宁 、5$8 、 哗 哩 哗 哩 和 掘 金 等 〈 排名 不 分 先后 )， 这 里 就 不 一 一 列举 了 。 

在 社区 上 ， 有 300 多 位 GitHub 贡献 者 为 Vue.js 或 者 它 的 子 项 目 提交 过 代码 。 社 区 项 目 也 非 
常 活跃 , 社区 上 有 很 多 基于 Vue.js 的 更 高 层 框架 和 组 件 , 比如 Nuxt、Quasar Framework 、Element、 
iView、Muse-UI、Vux 、Vuetify 、Vue Material 等 ， 这 些 项 目 在 GitHub 上 都 是 几 千 个 star 的 项 目 。 

说 了 这 么 多 ， 我 想 说 的 是 ，Vue.js 已 是 一 名 前 端 工程 师 必 备 的 技能 。 而 想 深入 了 解 Vuejjs 内 
部 的 核心 技术 原理 ， 就 来 阅读 本 书 吧 。 


Vue.js 最 独特 的 特性 之 一 是 看 起 来 并 不 显眼 的 响应 式 系统 。 数 据 模 型 仅仅 是 普通 的 
JavaScript 对 象 。 而 当 你 修改 它们 时 ， 视 图 会 进行 更 新 。 这 使 得 状态 管理 非常 简单 、 直 
接 。 不 过 理解 其 工作 原理 同样 重要 ， 这 样 你 可 以 回避 一 些 常 见 的 问题 。 一 一 官方 文档 


从 状态 生成 DOM， 再 输出 到 用 户 界面 显示 的 一 整套 流程 叫 作 泻 染 ， 应 用 在 运行 时 会 不 断 地 
进行 重新 泻 染 。 而 响应 式 系统 赋予 框架 重新 泻 染 的 能 力 ， 其 重要 组 成 部 分 是 变化 侦 测 。 变 化 俩 测 
是 响应 式 系统 的 核心 , 没有 它 ， 就 没有 重新 泻 染 。 框 架 在 运行 时 ,视图 也 就 无 法 随 着 状态 的 变化 
而 变化 。 


简单 来 说 , 变化 侦 测 的 作用 是 侦 测 数据 的 变化 。 当 数据 变化 时 , 会 通知 视图 进行 相应 的 更 新 。 

正如 文档 中 所 说 , 深入 理解 变化 侦 测 的 工作 原理 , 既 可 以 帮助 我 们 在 开发 应 用 时 回避 一 些 很 
常见 的 问题 ， 也 可 以 在 应 用 程序 出 问题 时 ， 快 速 调试 并 修复 问题 。 

本 篇 中 ， 我 们 将 针对 变化 侦 测 的 实现 原理 做 一 个 详细 介绍 ， 并 且 会 带 着 你 一 步 一 步 从 0 到 1 
实现 一 个 变化 侦 测 的 逻辑 。 学 完 本 篇 ， 你 将 可 以 自己 实现 一 个 变化 侦 测 的 功能 


0bject 的 变化 侦 测 


大 部 分 人 不 会 想到 0bject 和 Array 的 变化 侦 测 采用 不 同 的 处 理 方式 。 事 实 上 ， 它 们 的 侦 测 
方式 确实 不 一 样 。 在 这 一 章 中 ， 我 们 将 详细 介绍 object 的 变化 侦 测 。 


2.1 什么 是 变化 侦 测 


Vuejs 会 自动 通过 状态 生成 DOM， 并 将 其 输出 到 页 面 上 显示 出 来 ， 这 个 过 程 叫 泻 染 。Vuejjs 
的 泻 染 过程 是 声明 式 的 ， 我 们 通过 模板 来 描述 状态 与 DOM 之 间 的 映射 关系 。 

通常 ,在 运行 时 应 用 内 部 的 状态 会 不 断 发 生变 化 ， 此 时 需要 不 停 地 重新 泻 染 。 这 时 如 何 确定 
状态 中 发 生 了 什么 变化 ? 

变化 侦 测 就 是 用 来 解决 这 个 问题 的 , 它 分 为 两 种 类 型 : 一 种 是 “ 推 ”(push ), 男 一 种 是 “ 拉 ” 
( pull )。 

Angular 和 React 中 的 变化 侦 测 都 属于 “ 拉 ”， 这 就 是 说 当 状 态 发 生变 化 时 ， 它 不 知道 哪个 状 
态 变 了 ， 只 知道 状态 有 可 能 变 了 ,然后 会 发 送 一 个 信号 告诉 框架 , 框架 内 部 收 到 信号 后 ,会 进行 
一 个 暴力 比 对 来 找 出 哪些 DOM 节点 需要 重新 演 染 。 这 在 Angular 中 是 脏 检 查 的 流程 ， 在 React 
中 使 用 的 是 虚拟 DOM。 

而 Vuejs 的 变化 侦 测 属于 “ 推 ?。 当 状态 发 生变 化 时 ，Vuejjs 立刻 就 知道 了 ， 而 且 在 一 定 程 
度 上 知道 哪些 状态 变 了 。 因 此 ， 它 知道 的 信息 更 多 ， 也 就 可 以 进行 更 细 粒 度 的 更 新 。 

所 谓 更 细 粒 度 的 更 新 ， 就 是 说 : 假如 有 一 个 状态 绑 定 着 好 多 个 依赖 ， 每 个 依赖 表示 一 个 具体 
的 DOM 节点, 那么 当 这 个 状态 发 生变 化 时 , 向 这 个 状态 的 所 有 依赖 发 送 通知 , 让 它们 进行 DOM 
更 新 操作 。 相 比较 而 言 ,“ 拉 ”的 粒度 是 最 粗 的 。 

但 是 它 也 有 一 定 的 代价 ， 因 为 粒度 越 细 ， 每 个 状态 所 绑 定 的 依赖 就 越 多 ， 依 赖 追 踪 在 内 存 
上 的 开销 就 会 越 大 。 因 此 ， 从 Vue.js 2.0 开始 ， 它 引入 了 虚拟 DOM， 将 粒度 调整 为 中 等 粒度 ， 
即 一 个 状态 所 绑 定 的 依赖 不 再 是 具体 的 DOM 节点 ， 而 是 一 个 组 件 。 这 样 状态 变化 后 ， 会 通知 
到 组 件 ， 组 件 内 部 再 使 用 虚拟 DOM 进行 比 对 。 这 可 以 大 大 降低 依赖 数量 ， 从 而 降低 依赖 追踪 
所 消耗 的 内 存 。 
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Vuejs 之 所 以 能 随意 调整 粒度 ， 本 质 上 还 要 归功 于 变化 侦 测 。 因 为 “ 推 ” 类 型 的 变化 侦 测 可 
以 随意 调整 粒度 。 


2.2 ”如 何 追 踪 变 化 2 


关于 变化 侦 测 , 首先 要 问 一 个 问题 , 在 JavaScript ( 简称 JS ) 中 , 如 何 侦 测 一 个 对 象 的 变化 ? 

其 实 这 个 问题 还 是 比较 简单 的 。 学 过 JavaScript 的 人 都 知道 ， 有 两 种 方法 可 以 侦 测 到 变化 : 
使 用 0bject.defineProperty 和 ES6 的 Proxy。 

由 于 ES6 在 浏览 器 中 的 支持 度 并 不 理想 ， 到 目前 为 止 Vue,js 还 是 使 用 object.define- 
Property 来 实现 的 ， 所 以 书 中 也 会 使 用 它 来 介绍 变化 侦 测 的 原理 。 

由 于 使 用 0bject.defineProperty 来 侦 测 变化 会 有 很 多 缺陷 ， 所 以 Vuejs 的 作者 尤 雨 溪 说 
日 后 会 使 用 Proxy 重 写 这 部 分 代码 。 好 在 本 章 讲 的 是 原理 和 思想 ， 所 以 即便 以 后 用 Proxy 重 写 
了 这 部 分 代码 ， 书 中 介绍 的 原理 也 不 会 变 。 

知道 了 object.defineProperty 可 以 侦 测 到 对 象 的 变化 ， 那 么 我 们 可 以 写 出 这 样 的 代码 : 


61 function defineReactive (data, key, val) { 


62 Object.defineProperty(data，key，{ 
03 enumerable: true, 

64 configurable: true， 

65 get: function () { 

66 return val 

67 }s 

68 set: function (newVal) { 
69 if(val === newVal){ 

16 return 

11 } 

12 val = newVal 

13 } 

14 }) 

15 } 


这 里 的 函数 defineReactive 用 来 对 0bject.defineProperty 进行 封装 。 从 函数 的 名 字 可 
以 看 出 ， 其 作用 是 定义 一 个 响应 式 数 据 。 也 就 是 在 这 个 函数 中 进行 变化 追踪 ,封装 后 只 需要 传递 
data、key 和 val 就 行 了 。 

封装 好 之 后 ， 每 当 从 data 的 key 中 读 取 数据 时 ，get 函数 被 触发 ; 每 当 往 data 的 key 中 
设置 数据 时 ，set 冰 数 被 触发 。 


2.3 ”如 何 收集 依赖 


如 果 只 是 把 object.defineProperty 进行 封装 ， 那 其 实 并 没什么 实际 用 处 ， 真 正 有 用 的 是 
收集 依赖 。 


8 第 2 章 Object 的 变化 侦 测 


现在 我 要 问 第 二 个 问题 : 如 何 收集 依赖 ? 


思考 一 下 ,我 们 之 所 以 要 观察 数据 ,其 目的 是 当 数据 的 属性 发 生变 化 时 ， 可 以 通知 那些 曾经 
使 用 了 该 数据 的 地 方 。 


| 


举 个 例子 : 
61 <template> 
02 <h1>{{ name }}</h1> 


63 </template> 


该 模板 中 使 用 了 数据 name， 所 以 当 它 发 生变 化 时 ， 要 向 使 用 了 它 的 地 方 发 送 通知 。 


注意 在 Vue.js2.0 中 ， 模 板 使 用 数据 等 同 于 组 件 使 用 数据 ， 所 以 当 数 据 发 生变 化 时 ， 会 将 通知 
发 送 到 组 件 ， 然 后 组 件 内 部 再 通过 虚拟 DOM 重新 泻 染 。 


对 于 上 面 的 问题 ,我 的 回答 是 ， 先 收集 依赖 ， 即 把 用 到 数据 name 的 地 方 收 集 起 来 ， 然 后 等 
属性 发 生变 化 时 ， 把 之 前 收集 好 的 依赖 循环 触发 一 遍 就 好 了 。 


总 结 起 来 ， 其 实 就 一 句 话 ， 在 getter 中 收集 依赖 ， 在 setter 中 触发 依赖 。 


2.4 依赖 收集 在 哪里 


现在 我 们 已 经 有 了 很 明确 的 目标 ， 就 是 要 在 getter 中 收集 依赖 ， 那 么 要 把 依赖 收集 到 哪里 
去 呢 ? 

思考 一 下 , 首先 想到 的 是 每 个 key 都 有 一 个 数组 , 用 来 存储 当前 key 的 依赖 。 假 设 依赖 是 一 
个 函数 ， 保 存在 window.target 上 ， 现 在 就 可 以 把 defineReactive 也 数 稍微 改造 一 下 : 


61 function defineReactive (data, key, val) { 
62 let dep = [] // 新 增 


83 Object.defineproperty(data, key, { 
04 enumerable: true, 

@5 configurable: true, 

66 get: function () { 

87 dep.push(window.target) // 新 增 
68 return val 

69 }, 

16 set: function (newVal) { 

411 if(val === newVal){ 

12 return 

13 } 

14 // 新 增 

15 for (let i = 6;j i < dep.length; i++) { 
16 dep[i](newVal, val) 

水 

18 val = newVal 
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20 }) 
21 } 


这 里 我 们 新 增 了 数组 dep， 用 来 存储 被 收集 的 依赖 。 
然后 在 set 被 触发 时 ,循环 dep 以 触发 收集 到 的 依赖 。 


但 是 这 样 写 有 点 耦合 ,我们 把 依赖 收集 的 代码 封装 成 一 个 Dep 类 , 它 专门 帮助 我 们 管理 依赖 。 
使 用 这 个 类 ， 我 们 可 以 收集 依赖 、 删 除 依赖 或 者 向 依赖 发 送 通知 等 。 其 代码 如 下 : 


61 export default class Dep { 


62 constructor () { 

63 this.subs = [] 

@4 } 

85 

66 addSsub (sub) { 

67 this.subs.push(sub) 

68 } 

89 

16 removeSub (sub) { 

11 remove(this.subs, sub) 

12 } 

13 

14 depend () { 

15 if (window.target) { 

16 this.addSub(window.target) 
17 } 

18 } 

19 

26 notify () { 

21 const subs = this.subs.slice() 
22 for (let i = 86, 1 = subs.length; i < 1; i++) { 
23 subs[i].update() 

24 

25 } 

26 } 

27 


28 function remove (arr, item) { 
29 if (arr.length) { 


36 const index = arr.indexof(item) 
31 if (index > -1) { 

32 return arr.splice(index, 1) 
33 } 

34 } 

35 } 


之 后 再 改造 一 下 defineReactive: 


61 function defineReactive (data, key, val) { 
62 let dep = new Dep() // 修改 


63 Object.definepProperty(data, key, { 
64 enumerable: true, 
65 configurable: true， 


66 get: function () { 
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87 dep.depend() // 修改 
08 return val 

69 }, 

16 set: function (newVal) { 
11 if(val === newVal){ 
12 return 

13 } 

14 val = newVal 

15 dep.notify() // 新 增 
16 } 

17 }) 

18 -证 


此 时 代码 看 起 来 清晰 多 了 ， 这 也 顺便 回答 了 上 面 的 问题 ， 依 赖 收集 到 哪儿 ?收集 到 Dep 中 。 


2.5 ”依赖 是 谁 


在 上 面 的 代码 中 , 我 们 收集 的 依赖 是 window.target, 那么 它 到 底 是 什么 ”我 们 究竟 要 收集 
谁 呢 ? 

收集 谁 ， 换 名 话说， 就 是 当 属性 发 生变 化 后 ， 通 知 谁 。 

我 们 要 通知 用 到 数据 的 地 方 ， 而 使 用 这 个 数据 的 地 方 有 很 多 ， 而 且 类 型 还 不 一 样 ， 既 有 可 
能 是 模板 ， 也 有 可 能 是 用 户 写 的 一 个 watch ， 这 时 需要 抽象 出 一 个 能 集中 处 理 这 些 情况 的 类 。 
然后 ， 我 们 在 依赖 收集 阶段 只 收集 这 个 封装 好 的 类 的 实例 进来 ， 通 知 也 只 通知 它 一 个 。 接 着 ， 
它 再 负责 通知 其 他 地 方 。 所 以 ,我们 要 抽象 的 这 个 东西 需要 先 起 一 个 好 听 的 名 字 。 嗯 ， 就 叫 它 
Watcher 吧 。 


现在 就 可 以 回答 上 面 的 问题 了 ， 收 集 谁 ? Watcher! 


2.6 ”什么 是 Watcher 


Watcher 是 一 个 中 介 的 角色 ， 数 据 发 生变 化 时 通知 它 ， 然 后 它 再 通知 其 他 地 方 。 
关于 Watcher， 先 看 一 个 经 典 的 使 用 方式 : 


81 // keypath 

@2 vm.$watch('a.b.c', function (newVal, oldVal) { 
63 // 做 点 什么 

64 }) 


这 段 代码 表示 当 data.a.b.c 属性 发 后 变化 时 ， 触 发 第 二 个 参数 中 的 函数 。 

思考 一 下 , 怎么 实现 这 个 功能 呢 ? 好 像 只 要 把 这 个 watcher 实例 添加 到 data.a.b.c 属性 的 
Dep 中 就 行 了 。 然 后 ， 当 data.a.b.c 的 值 发 生变 化 时 ， 通 知 Watcher。 接 着 ，Watcher 再 执行 
参数 中 的 这 个 回调 函数 。 


好 ， 思 考 完毕 ， 写 出 如 下 代码 : 
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861 export default class Watcher { 


62 constructor (vm, expOrFn, cb) { 

63 this.vm = vm 

64 // 执行 this.getter()， 就 可 以 读 取 data.a.b.c 的 内 容 
85 this.getter = parsePath(expOrFn) 

66 this.cb = cb 

87 this.value = this.get() 

68 } 

69 

10 get() { 

11 window.target = this 

12 let value = this.getter.call(this.vm, this.vm) 
13 window.target = undefined 

14 return value 

15 } 

16 

$7 update () { 

18 const oldValue = this.value 

19 this.value = this.get() 

26 this.cb.call(this.vm, this.value, oldValue) 
21 } 

22 } 


这 段 代码 可 以 把 自己 主动 添加 到 data.a.b.c 的 Dep 中 去 ， 是 不 是 很 神奇 ? 

因为 我 在 get 方法 中 先 把 window.target 设置 成 了 this, 也 就 是 当前 watcher 实例 ,然后 
再 读 一 下 data.a.b.c 的 值 ， 这 肯定 会 触发 getter。 

触发 了 getter, 就 会 触发 收集 依赖 的 逻辑 。 而 关于 收集 依赖 , 上 面 已 经 介绍 了 , 会 从 window. 
target 中 读 取 一 个 依赖 并 添加 到 Dep 中 。 

这 就 导致 ， 只 要 先 在 window.target 赋 一 个 this， 然 后 再 读 一 下 值 ， 去 触发 getter， 就 可 
以 把 this 主动 添加 到 keypath 的 Dep 中 。 有 没有 很 神奇 的 感觉 啊 ? 

依赖 注入 到 pep 中 后 ,每 当 data.a.b.c 的 值 发 生变 化 时 ， 就 会 让 依赖 列表 中 所 有 的 依赖 特 
环 触发 update 方法 ,也 就 是 Watcher 中 的 update 方法 。 而 update 方法 会 执行 参数 中 的 回调 函 
数 ， 将 value 和 oldvalue 传 到 参数 中 。 

所 以 ， 其 实 不 管 是 用 户 执行 的 vm.$watch('a.b.c'，(value，oldValue) => {})， 还 是 模 
板 中 用 到 的 data， 都 是 通过 Watcher 来 通知 自己 是 否 需要 发 生变 化 。 


这 里 有 些小 伙伴 可 能 会 好 奇 上 面 代码 中 的 parsePath 是 怎么 读 取 一 个 字符 串 的 keypath 的 ， 
下 面 用 一 段 代 码 来 介绍 其 实现 原理 : 

01 /** 

62 * 解析 简单 路 径 

03 */ 


64 const bailRE = /[^\w.$]/ 

65 export function parsepath (path) { 
66 if (bailRE.test(path)) { 

67 return 
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68 } 

89 const segments = path.split('.') 

16 return function (obj) { 

11 for (let i = 86; i < segments.length; i++) { 
12 if (!obJj) return 

13 obj = obj[segments[i]] 

14 

15 return obj 

16 } 

17 } 


可 以 看 到 ， 这 其 实 并 不 复杂 。 先 将 keypath 用 . 分 割 成 数组 ， 然 后 循环 数组 一 层 一 层 去 读数 


据 ， 最 后 拿 到 的 obj 就 是 keypath 中 想 要 读 的 数据 。 


2.7 ”递归 侦 测 所 有 key 


现在 , 其 实 已 经 可 以 实现 变化 侦 测 的 功能 了 , 但 是 前 面 


它们 的 变化 : 


81 /** 
02 * Observer 类 会 附加 到 每 一 个 被 侦 测 的 object 上 。 


介绍 的 代码 只 能 侦 测 数据 中 的 某 一 个 


属性 ， 我 们 希望 把 数据 中 的 所 有 属性 (包括 子 属性 ) 都 侦 测 到 所 以 要 封装 一 个 observer 类 。 
这 人 个 类 的 作用 是 将 一 个 数据 内 的 所 有 属性 (包括 子 属性 ) 都 转换 成 getter/setter 的 形式 ， 然 后 去 
追踪 2 


63 * 一 旦 被 附加 上 ，0bserver 会 将 object 的 所 有 属性 转换 为 getter/setter 的 形式 


64 * 来 收集 属性 的 依赖 ， 并 且 当 属性 发 生变 化 时 会 通知 这 些 依 赖 


85 */ 

86 export class Observer { 

87 constructor (value) { 

68 this.value = Value 

69 

16 if (!Array.isArray(value)) { 

11 this.walk(value) 

12 } 

13 } 

14 

15 /** 

16 * Walk 会 将 每 一 个 属性 都 转换 成 getter/setter 的 形式 来 侦 测 变化 
17 * 这 个 方法 只 有 在 数据 类 型 为 Object 时 被 调用 
18 */ 

19 walk (obj) { 

26 const keys = Object.keys(obj) 

21 for (let i = 6; i «< keys.length; i++) { 
22 defineReactive(obj, keys[i], obj[keys[i]]) 
23 } 

24 } 

25 } 

26 


27 function defineReactive (data, key, val) { 
28 // 新 增 ， 递 归 子 属性 

29 if (typeof val === 'object') { 

36 new Observer(val) 
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31 } 

32 let dep = new Dep() 

33 Object.definepProperty(data, key, { 
34 enumerable: true, 

35 configurable: true， 

36 get: function () { 

37 dep.depend() 

38 return val 

39 }， 

46 set: function (newVal) { 
41 if(val === newVal){ 

42 return 

43 } 

44 

45 val = newVal 

46 dep.notify() 

47 

48 

49 } 


在 上 面 的 代码 中 ， 我 们 定义 了 observer 类 ， 它 用 来 将 一 个 正常 的 object 转换 成 被 侦 测 的 
object。 


然后 判断 数据 的 类 型 ， 只 有 0bject 类 型 的 数据 才 会 调用 walk 将 每 一 个 属性 转换 成 
getter/setter 的 形式 来 侦 测 变化 。 


最 后 ,在 defineReactive 中 新 增 new 0bserver(val) 来 递归 子 属性 ， 这 样 我 们 就 可 以 把 
data 中 的 所 有 属性 ( 包括 子 属性 ) 都 转换 成 getter/setter 的 形式 来 侦 测 变化 。 


当 data 中 的 属性 发 生变 化 时 ， 与 这 个 属性 对 应 的 依赖 就 会 接收 到 通知 。 


也 就 是 说 ， 只 要 我 们 将 一 个 object 传 到 observer 中 , 那么 这 个 object 就 会 变 成 响应 式 的 
object。 


2.8 关于 0bject 的 问题 


前 面 介 绍 了 0bject 类 型 数据 的 变化 侦 测 原 理 ， 了 解 了 数据 的 变化 是 通过 getter/setter 来 追踪 
的 。 也 正 是 由 于 这 种 追踪 方式 ， 有 些 语 法 中 即便 是 数据 发 生 了 变化 ，Vuejs 也 追踪 不 到 。 


比如 ， 向 object 添加 属性 : 


61 var vm = new Vue({ 


02 el: '#el', 

63 template: '#demo-template', 
64 methods: { 

65 action () { 

66 this.obj.name = 'berwin' 
67 } 

68 }, 


69 data: { 
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16 obj: {} 
} 
12. "7) 
在 action 方法 中 , 我 们 在 obj 上 面 新 增 了 name 属性 ，Vue.js 无 法 侦 测 到 这 个 变化 ， 所 以 不 
会 向 依赖 发 送 通 知 。 
再 比如 ， 从 obj 中 删除 一 个 属性 : 


61 var vm = new Vue({ 


62 el: '#el', 

03 template: '#demo-template', 
84 methods: { 

85 action () { 

66 delete this.obj.name 
67 } 

88 }， 

89 data: { 

16 obj: { 

11 name: 'berwin' 

12 } 

13 } 

14 })) 


在 上 面 的 代码 中 ， 我 们 在 action 方法 中 删除 了 obj 中 的 name 属性 ， 而 Vuejs 无 法 侦 测 到 
这 个 变化 ， 所 以 不 会 向 依赖 发 送 通知 。 

Vue.js 通过 0bject.defineProperty 来 将 对 象 的 key 转换 成 getter/setter 的 形式 来 追踪 变化 ， 
但 gettersetter 只 能 追踪 一 个 数据 是 否 被 修改 ， 无 法 追踪 新 增 属 性 和 删除 属性 ， 所 以 才 会 导致 上 
面 例子 中 提 到 的 问题 。 

但 这 也 是 没有 办 法 的 事 ， 因 为 在 ES6 之 前 ，JavaScript 没有 提供 元 编程 的 能 力 ， 无 法 侦 测 到 
一 个 新 属性 被 添加 到 了 对 象 中 ， 也 无 法 侦 测 到 一 个 属性 从 对 象 中 删除 了 。 为 了 解决 这 个 问题 ， 
Vuejs 提供 了 两 个 API 一 vm.gset 与 vm.$delete， 第 4 章 会 详细 介绍 它们 。 


2.9 ”总结 


变化 侦 测 就 是 侦 测 数 据 的 变化 。 当 数据 发 生变 化 时 ， 要 能 侦 测 到 并 发 出 通知 。 


Object 可 以 通过 object.defineProperty 将 属性 转换 成 getter/setter 的 形式 来 追踪 变化 。 
读 取 数据 时 会 触发 getter， 修 改 数据 时 会 触发 setter。 


我 们 需要 在 getter 中 收集 有 哪些 依赖 使 用 了 数据 。 当 setter 被 触发 时 , 去 通知 getter 中 收集 的 
依赖 数据 发 生 了 变化 。 


收集 依赖 需要 为 依赖 找 一 个 存储 依赖 的 地 方 ， 为 此 我 们 创建 了 Dep， 它 用 来 收集 依赖 、 删 除 
依赖 和 向 依赖 发 送 消息 等 。 


所 谓 的 依赖 ， 其 实 就 是 Watcher。 只 有 Matcher 触发 的 getter 才 会 收集 依 


胆 


， 哪 个 Watcher 
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触发 了 getter， 就 把 哪个 Watcher 收集 到 Dep 中 。 当 数据 发 生变 化 时 ， 会 循环 依赖 列表 ， 把 所 有 
的 Watcher 都 通知 一 遍 。 

Watcher 的 原理 是 先 把 自己 设置 到 全 局 唯一 的 指定 位 置 (例如 window. target )， 然 后 读 取 
数据 。 因 为 读 取 了 数据 ， 所 以 会 触发 这 个 数据 的 getter。 接 着 ， 在 getter 中 就 会 从 全 局 唯一 的 那 
个 位 置 读 取 当 前 正在 读 取 数 据 的 Watcher ,并 把 这 个 Watcher 收集 到 Dep 中 去 。 通 过 这 样 的 方式 ， 
Watcher 可 以 主动 去 订阅 任意 一 个 数据 的 变化 。 


此 外 ， 我 们 创建 了 observer 类 ， 它 的 作用 是 把 一 个 object 中 的 所 有 数据 ( 包括 子 数据 ) 
都 转换 成 响应 式 的 ， 也 就 是 它 会 侦 测 object 中 所 有 数据 ( 包括 子 数据 ) 的 变化 。 


由 于 在 ES6 之 前 JavaScript 并 没有 提供 元 编程 的 能 力 ， 所 以 在 对 象 上 新 增 属性 和 删除 属性 都 
无 法 被 追踪 到 。 


2-1 给 出 了 Data、0Observer 、Dep 和 Watcher 之 间 的 关系 。 


外 界 
“~、、 通 知 外 界 
读数 据 、 
Data A 
读数 据 
Observer getter ©， WO 
setter ~ 
收集 依赖 


3 > \ pi 
通知 依赖 ee _- 了 通知 Watcher 


图 2-1 Data、Observer、Dep 和 Watcher 之 间 的 关系 
Data 通过 0bserver 转换 成 了 getter/setter 的 形式 来 追踪 变化 。 
当 外 界 通 过 Watcher 读 取 数据 时 ， 会 触发 getter 从 而 将 Watcher 添加 到 依赖 中 。 
当 数 据 发 生 了 变化 时 ， 会 触发 setter， 从 而 向 Dep 中 的 依赖 (Watcher ) 发 送 通 知 。 


Watcher 接收 到 通知 后 ， 会 向 外 界 发 送 通知 ， 变 化 通知 到 外 界 后 可 能 会 触发 视图 更 新 ， 也 有 
可 能 触发 用 户 的 某 个 回调 函数 等 。 


Array 的 变化 侦 测 


上 一 章 介绍 了 object 的 侦 测 方式 ， 本 章 介绍 Array 的 侦 测 方式 。 

可 能 很 多 人 不 太 理 解 为 什么 Array 的 侦 测 方式 和 0bject 的 不 同 ， 下 面 我 们 举例 说 明 一 下 : 

61 this.1ist.push(1) 
在 上 面 的 代码 中 ， 我 们 使 用 push 方法 向 1ist 中 新 增 了 数字 1。 

前 面 介绍 object 的 时 候 , 我 们 说 过 其 侦 测 方式 是 通过 getter/setter 实现 的 , 但 上 面 这 个 例子 
使 用 了 push 方法 来 改变 数组 ， 并 不 会 触发 getter/setter。 

正 因 为 我 们 可 以 通过 Array 原型 上 的 方法 来 改变 数组 的 内 容 ， 所 以 0bject 那 种 通过 
getter/setter 的 实现 方式 就 行 不 通 了 。 


3.1 如何 追踪 变化 


0bject 的 变化 是 靠 setter 来 追踪 的 ， 只 要 一 个 数据 发 生 了 变化 ,一定 会 触发 setter。 

同 理 ， 前 面 例子 中 使 用 push 来 改变 数组 的 内 容 ， 那 么 我 们 只 要 能 在 用 户 使 用 push 操作 数 
组 的 时 候 得 到 通知 ， 就 能 实现 同样 目的 。 

可 惜 的 是 ， 在 ES6 之 前 ，JavaScript 并 没有 提供 元 编程 的 能 力 ， 也 就 是 没有 提供 可 以 拦截 
原型 方法 的 能 力 ， 但 是 这 难 不 倒 聪明 的 程序 员 们 。 我 们 可 以 用 自 定 义 的 方法 去 覆盖 原生 的 原型 
方法 。 

如 图 3-1 所 示 ， 我 们 可 以 用 一 个 拦截 器 覆盖 Array .prototype。 之后, 每 当 使 用 Array 原型 
上 的 方法 操作 数组 时 ， 其 实 执行 的 都 是 拦截 器 中 提供 的 方法 ， 比 如 push 方法 。 然 后 ， 在 拦截 器 
中 使 用 原生 Array 的 原型 方法 去 操作 数组 。 
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Array.prototype 


Array 构 造 国 数 


图 3-1 使 用 拦截 器 覆盖 原生 的 原型 方法 
这 样 通过 拦截 器 ， 我 们 就 可 以 追踪 到 Array 的 变化 。 


3.2 ”拦截 器 

上 一 节 中 ， 我 们 已 经 介绍 了 拦截 器 的 作用 ， 这 一 节 介 绍 如 何 实 现 它 。 

拦截 需 其 实 就 是 一 个 和 Array .prototype 一 样 的 Object， 里 面包 含 的 属性 一 模 一 样 ， 只 不 
过 这 个 0bject 中 某 些 可 以 改变 数组 自身 内 容 的 方法 是 我 们 处 理 过 的 。 

经 过 整理 , 我 们 发 现 Array 原型 中 可 以 改变 数组 自身 内 容 的 方法 有 7 个 , 分 别 是 push、pop、 
shift、 unshift、splice、sort 和 reverse。 

下 面 我 们 写 出 代码 : 


01 const arrayProto = Array.prototype 
92 export const arrayMethods = Object.create(arrayProto) 


03 

64 ;[ 

85 "push ' ， 

66 "pop ， 

87 "shift"', 
08 "unshift '， 
99 "splice', 
16 'sort', 

11 "Feverse ' 
12 


13 .forEach(function (method) { 

14 // 缓存 原始 方法 

15 const original = arrayProto[method] 

16 Object.definePproperty(arrayMethods, method, { 
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17 value: function mutator (...args) { 
18 return original.apply(this, args) 
19 }, 

20 enumerable: false, 

21 writable: true, 

22 configurable: true 

23 }) 

24 }) 


在 上 面 的 代码 中 ， 我 们 创建 了 变量 arrayMethods ， 它 继承 自 Array.prototype， 具 备 其 所 
有 功能 。 未 来 ， 我 们 要 使 用 arrayMethods 去 覆盖 Array .prototype。 


接 下 来 ,在 arrayMethods 上 使 用 object.defineProperty 方法 将 那些 可 以 改变 数组 自身 
内 容 的 方法 (push、pop、shift、unshift、splice、sort 和 reverse ) 进行 封装 。 

所 以 , 当 使 用 push 方法 的 时 候 , 其 实 调用 的 是 arrayMethods .push, 而 arrayMethods .push 
是 函数 mutator， 也 就 是 说 ， 实 际 上 执行 的 是 mutator 函数 。 

最 后 ， 在 mutator 中 执行 original ( 它 是 原生 Array.prototype 上 的 方法 ， 例 如 Array. 
prototype.push ) 来 做 它 应 该 做 的 事 ， 比 如 push 的 功能 。 

因此 ， 我 们 就 可 以 在 mutator 函数 中 做 一 些 其 他 的 事 ， 比 如 说 发 送 变 化 通知 。 


3.3 ”使 用 拦截 器 覆盖 Array 原型 


有 了 拦截 器 之 后 , 想 要 让 它 生效 ,就 需要 使 用 它 去 有 覆盖 Array .prototype。 但 是 我 们 又 不 能 
直接 覆盖 ， 因 为 这 样 会 污染 全 局 的 Array， 这 并 不 是 我 们 希望 看 到 的 结果 。 我们 希望 拦截 操作 只 
针对 那些 被 侦 测 了 变化 的 数据 生效 ， 也 就 是 说 希望 拦截 厦 只 宪 盖 那些 响应 式 数组 的 原型 。 

而 将 一 个 数据 转换 成 响应 式 的 , 需要 通过 0bserver, 所 以 我 们 只 需要 在 observer 中 使 用 拦 
截 需 覆盖 那些 即将 被 转换 成 啊 应 式 Array 类 型 数据 的 原型 就 好 了 : 


861 export class Observer { 


62 constructor (value) { 

@3 this.value = value 

64 

65 if (Array.isArray(value)) { 

66 Vvalue. proto _ = arrayMethods // 新 增 
67 } else { 

68 this.walk(value) 

69 } 

16 } 

”站 

在 上 面 的 代码 中 ， 我 们 新 增 了 一 行 代码 : 
91 value._ proto = arrayMethods 


它 的 作用 是 将 拦截 器 (加工 后 具备 拦截 功能 的 arrayMethods ) 赋值 给 value. proto _， 通 :; 
proto_ “可 以 很 巧妙 地 实现 覆盖 value 原型 的 功能 ， 如 图 3-2 所 示 。 
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Array.prototype 


图 3-2 使 用 _proto_ _ 履 盖 原 型 


_ proto_ “其 实 是 0bject.getPrototypeOf 和 Object.setPrototypeof 的 早期 实现 ， 所 以 
使 用 ES6 的 0bject.setPrototypeof 来 代替 _proto_ “完全 可 以 实现 同样 的 效果 。 只 是 到 目前 
为 止 ，ES6 在 浏览 锅 中 的 支持 度 并 不 理想 。 


3.4 将 拦截 器 方法 挂 载 到 数组 的 属性 上 
虽然 绝 大 多 数 浏览 器 都 支持 这 种 非 标准 的 属性 ( 在 ES6 之 前 并 不 是 标准 ) 来 访问 原型 ,但 并 
不 是 所 有 浏览 器 都 支持 ! 因此 ， 我 们 需要 处 理 不 能 使 用 _proto__ 的 情况 。 


Vue 的 做 法 非常 粗暴 ， 如 果 不 能 使 用 _proto_ _， 就 直接 将 arrayMethods 身上 的 这 些 方法 
设置 到 被 侦 测 的 数组 上 


61 import { arrayMethods } from './array’ 


/ 


62 

83 // _proto _ 是 否 可 用 

64 const hasProto = '_ proto_ "in {} 
65 const arrayKeys = Object.getOwnPropertyNames(arrayMethods) 
66 

87 export class Observer { 

88 constructor (value) { 

69 this.value = Value 

16 

11 if (Array.isArray(value)) { 

12 // 修改 

13 const augment = hasProto 

14 ? protoAugment 


15 : copyAugment 
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16 augment(value, arrayMethods, arrayKeys) 
17 } else { 
18 this.walk(value) 


25 function protoAugment (target, src, keys) { 
26 target._ proto = src 
27 } 


29 function copyAugment (target, src, keys) { 
36 for (let i = 6，1 = keys.length; i < 1; i++) { 


31 const key = keys[i] 

32 def(target, key, src[key]) 
33 } 

34 } 


在 上 面 的 代码 中 ， 我 们 新 增 了 hasProto 来 判断 当前 浏览 器 是 否 支持 proto _。 还 新 增 了 
copyAugment 函数 ， 用 来 将 已 经 加 工 了 拦截 操作 的 原型 方法 直接 添加 到 value 的 属性 中 。 


此 外 ,还 使 用 hasProto 判断 浏览 需 是 否 支 持 _proto__: 如 果 支 持 , 则 使 用 protoAugment 
函数 来 履 盖 原型 ;如 果 不 支持 ， 则 调用 copyAugment 困 数 将 拦截 需 中 的 方法 挂 载 到 value 上 。 

如 图 3-3 所 示 ， 在 浏览 器 不 支持 __proto _ 的 情况 下 , 会 在 数组 上 挂 载 一 些 方 法 。 当 用 户 使 
用 这 些 方法 时 ， 其 实 执行 的 并 不 是 浏览 器 原生 提供 的 Array .prototype 上 的 方法 ， 而 是 拦截 器 
中 提供 的 方法 。 


Array.prototype 


Array 构 造 函 数 


list.push -一 一 本 有 
一 Tist.pop 一 一 


也 一 在 st. shift 7 区 


天 一 一 / 


Pb Hist unshapeas 六 / 
b 1 list. splice 了 / 


| 一 


os en 
be list.reverse 


图 3-3 ”将 拦截 需 方法 挂 载 到 数组 属性 上 
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因为 当 访问 一 个 对 象 的 方法 时 ， 只 有 其 自身 不 存在 这 个 方法 ， 才 会 去 它 的 原型 上 找 这 个 
方法 。 


3.5 ”如何 收集 依赖 


上 一 节 中 ,我们 介绍 并 且 创建 了 拦截 器 。 
可 能 你 也 发 现 了 ,如果 只 有 一 个 拦截 器 ,， 其实 还 是 什么 事 都 做 不 了 。 为 什么 会 这 样 呢 ? 因为 
我 们 之 所 以 创建 拦截 器 , 本 质 上 是 为 了 得 到 一 种 能 力 , 一 种 当 数组 的 内 容 发 生变 化 时 得 到 通知 的 
能 力 。 
而 现在 我 们 虽然 具备 了 这 样 的 能 力 ， 但 是 通知 谁 呢 ? 前 面 我 们 介绍 object 时 说 过 ， 答 案 肯 
定 是 通知 Dep 中 的 依赖 (Watcher )， 但 是 依赖 怎么 收集 呢 ? 这 就 是 本 节 要 介绍 的 内 容 ， 如 何 收 
集 数组 的 依赖 ! 


在 这 之 前 ， 我 们 先 简单 回顾 一 下 0bject 的 依赖 是 如 何 收集 的 。 


0bject 的 依赖 前 面 介 绍 过 ， 是 在 defineReactive 中 的 getter 里 使 用 Dep 收集 的 ， 每 个 key 
都 会 有 一 个 对 应 的 Dep 列表 来 存储 依赖 。 


简单 来 说 ， 就 是 在 getter 中 收集 依赖 ， 依 赖 被 存储 在 Dep 里 。 
那么 ， 数 组 在 哪里 收集 依赖 呢 ? 其 实数 组 也 是 在 getter 中 收集 依赖 的 。 
有 些 同 学 可 能 不 明白 了 ， 没 关系 ， 我 们 举例 说 明 一 下 : 


61 { 
62 list: [1,2,3,4,5] 
63 } 


如 果 是 上 面 这 样 的 数据 ， 那 么 想得到 1ist 数组 ， 肯 定 是 要 访问 1ist 这 个 key， 对 吧 ? 

也 就 是 说 ， 其 实 不 管 value 是 什么 ， 要 想 在 一 个 0bject 中 得 到 某 个 属性 的 数据 ， 肯 定 要 通 
过 key 来 读 取 value。 

因此 ， 在 读 取 list 的 时 候 ， 肯 定 会 先 触发 这 个 名 字 叫 作 list 的 属性 的 getter， 举 个 例子 : 


91 this.1ist 
上 面 这 行 代码 从 this 上 读 取 1ist， 所 以 肯定 会 触发 1ist 这 个 属性 的 getter。 
而 Array 的 依赖 和 object 一 样 ， 也 在 defineReactive 中 收集 : 


61 function defineReactive (data, key, val) { 


62 if (typeof val === "object') new Observer(val) 
83 let dep = new Dep() 

84 Object.defineProperty(data，key，{ 

85 enumerable: true, 

86 configurable: true， 


87 get: function () { 
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88 dep.depend() 

69 // 这 里 收集 Array 的 依赖 
16 return val 

11 }， 

12 set: function (newVal) { 
13 if(val === newVal){ 
14 return 

15 } 

16 

17 dep.notify() 

18 val = newVal 

19 } 

20 }) 

21 } 


上 面 的 代码 新 增 了 一 段 注释 ， 接 下 来 要 在 这 个 位 置 去 收集 Array 的 依赖 。 
所 以 ，Array 在 getter 中 收集 依赖 ， 在 拦截 器 中 触发 依赖 。 


3.6 ”依赖 列表 存在 哪儿 


知道 了 如 何 收 集 依赖 后 ,下 一 个 要 面 对 的 问题 是 这 些 依 赖 列表 存在 哪儿 。Vue.js 把 Array 的 
依赖 存放 在 Observer 中 : 


0@1 export class Observer { 


62 constructor (value) { 

@3 this.value = value 

04 this.dep = new Dep() // 新 增 dep 
85 

66 if (Array.isArray(value)) { 

87 const augment = hasProto 

08 ? protoAugment 

69 : copyAugment 

16 augment(value, arrayMethods, arrayKeys) 
11 } else { 

12 this.walk(value) 

13 } 

14 } 

15 

16 ………… 

17 

18 } 


这 个 地 方 有 些 同学 可 能 会 有 疑问 , 为 什么 数组 的 dep( 依赖 ) 要 保存 在 observer 实例 上 呢 ? 


上 一 节 中 我 们 介绍 了 数组 在 getter 中 收集 依赖 ， 在 拦截 器 中 触发 依赖 ， 所 以 这 个 依赖 保存 的 
位 置 就 很 关键 ， 它 必须 在 getter 和 拦截 器 中 都 可 以 访 问 到 。 


我 们 之 所 以 将 依赖 保存 在 Observer 实例 上 ， 是 因为 在 getter 中 可 以 访问 到 observer 实例 ， 
同时 在 Array 拦截 器 中 也 可 以 访问 到 0bserver 实例 。 


后 面 会 介绍 如 何在 getter 中 访问 Dep 开始 收集 依赖 , 以 及 在 拦截 器 中 如 何 访问 Observer 实例 。 


3.7 收集 依赖 
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3.7 ”收集 依赖 


把 Dep 实例 保存 在 Observer 的 


61 
02 
03 
04 
85 
86 
87 
98 
89 
16 
1 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 


function defineReactive (data, key, val) { 

let childob = observe(val) // 修改 
let dep = new Dep() 
Object.definepProperty(data, key, { 

enumerable: true, 

configurable: true, 

get: function () { 

dep.depend() 


// 新 增 
if (childob) { 
childob.dep.depend() 
} 
return val 
}， 
set: function (newVal) { 
if(val === newVal){ 
return 


} 


dep.notify() 
val = newVal 


/ee* 
* 党 试 为 value 创建 一 个 Observer 实例 ， 
* 如 果 创 建成 功 ， 直 接 返 回 新 创建 的 Observer 实例 。 
* 如 果 value 已 经 存在 一 个 Observer 实例 ， 则 直接 返回 它 
#7 
export function observe (value, asRootData) { 
if (!isObject(value)) { 


return 

} 

let ob 

if (hasOwn(value, '_ ob ') && value._ ob__ instanceof Observer) { 
ob = value._ ob _ 

} else { 
ob = new Observer(value) 

} 

return ob 


} 


属性 上 之 后 , 我 们 可 以 在 getter 中 像 下 面 这 样 访问 并 收集 依赖 : 


在 上 面 的 代码 中 ， 我 们 新 增 了 函数 observe， 它 尝试 创建 一 个 observer 实例 。 如 果 value 


已 经 是 响应 式 数据 ,不 需要 再 次 创建 0bserver 实例 ,直接 返回 已 经 创建 的 observer 实例 即 可 ， 
避免 了 重复 侦 测 value 变化 的 问题 。 
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此 外 , 我 们 在 defineReactive 函数 中 调用 了 observe, 它 把 val 当 作 参数 传 了 进去 并 拿 到 


一 个 返回 值 ， Observer 实例 。 


前 面 我 们 介绍 过 数组 为 什么 在 getter 中 收集 依赖 ， 而 defineReactive 函数 中 的 val 很 有 可 
能 会 是 一 0 过 observe 我 们 得 到 了 数组 的 Observer 实例 ( childob ), 最 后 通过 childob 


的 dep 执行 depend 方法 来 收集 依赖 。 


通过 过 这 种 力 式 ， 我 们 就 可 以 实现 在 getter 中 将 依赖 收集 到 0bserver 实例 的 dep 中 。 更 通俗 


的 解释 是 : 通过 这 样 的 方式 可 以 为 数组 收集 依赖 。 


3.8 在 拦截 器 中 获取 0bserver 实例 
在 本 节 中 ， 我 们 将 介绍 如 何在 拦截 器 中 访问 observer 实例 。 


因为 Array 拦截 器 是 对 原型 的 一 种 封装 ， 所 以 可 以 在 拦截 器 中 访问 到 this ( 当前 正在 被 操 


作 的 数组 )。 


而 dep 保存 在 observer 中 ， 所 以 需要 在 this 上 读 到 0bserver 的 实例 : 


861 // 工具 有 子 数 
92 function def (obj, key, val, enumerable) { 


03 Object.defineproperty(obj, key, { 
04 value: val, 

@5 enumerable: !!enumerable， 

66 writable: true, 

87 configurable: true 

68 }) 

69 } 

16 

11 export class Observer { 

2 constructor (value) { 

13 this.value = value 

14 this.dep = new Dep() 

15 def(value,，'_ ob _'，this) // 新 增 
16 

17 if (Array.isArray(value)) { 

18 const augment = hasProto 

19 ? protoAugment 

26 : copyAugment 

21 augment(value, arrayMethods, arrayKeys) 
22 } else { 

23 this.walk(value) 

24 } 

25 } 

26 

27 

28 

29 } 


在 上 面 的 代码 中 ,我 们 在 observer 中 新 增 了 一 段 代 码 ， 它 可 以 在 value 上 新 增 一 个 不 可 枚 


举 的 属性 _ob _， 这 个 属性 的 值 就 是 当前 observer 的 实例 。 


3.9 ”向 数组 的 依赖 发 送 通知 ”25 


这 样 我 们 就 可 以 通过 数组 数据 的 _ob__ 属性 拿 到 0bserver 实例 ， 然 后 就 可 以 拿 到 _ob 
上 的 dep 啦 。 

当然 ，_ob ”的 作用 不 仅仅 是 为 了 在 拦截 器 中 访问 observer 实例 这 么 简单 , 还 可 以 用 来 标 
记 当 前 value 是 否 已 经 被 0bserver 转换 成 了 响应 式 数据 。 

也 就 是 说 ， 所 有 被 侦 测 了 变化 的 数据 身上 都 会 有 一 个 _ ob _ 属性 来 表示 它们 是 响应 式 的 。 
上 一 节 中 的 observe 函数 就 是 通过 __ob__ 属性 来 判断 :如 果 value 是 响应 式 的 ， 则 直接 返回 
ob; 如 果 不 是 响应 式 的 ， 则 使 用 new Observer 来 将 数据 转换 成 响应 式 数 据 。 

当 value 身上 被 标记 了 ob _ 之后， 就 可 以 通过 value. ob “来 访问 observer 实例 。 如 
果 是 Array 拦截 器 ， 因 为 拦截 器 是 原型 方法 ， 所 以 可 以 直接 通过 this. ob 来 访问 observer 
实例 。 例 如 : 


el ;[ 

82 "push ' ， 

63 “pop ， 

84 "shift"', 
@5 "unshift '， 
86 "splice', 
87 'sort', 

68 "reverse 
69  ] 


16 .forEach(function (method) { 
11 // 缓存 原始 方法 


12 const original = arrayProto[method] 
13 Object.defineProperty(arrayMethods, method, { 
14 value: function mutator (...args) { 
15 const ob = this. ob__ // 新 增 

16 return original.apply(this, args) 
17 和 

18 enumerable: false， 

19 writable: true, 

26 configurable: true 

21 }) 

22 }) 


在 上 面 的 代码 中 ， 我 们 在 mutator 函数 里 通过 this. ob _ 来 获取 0bserver 实例 。 


3.9 回 数 组 的 依赖 发 送 通知 


当 侦 测 到 数组 发 生变 化 时 ,会 向 依赖 发 送 通知 。 此 时 ,首先 要 能 访问 到 依赖 。 前 面 已 经 介绍 
过 如 何在 拦截 器 中 访问 observer 实例 ， 所 以 这 里 只 需要 在 Observer 实例 中 拿 到 dep 属性 ， 然 
后 直接 发 送 通 知 就 可 以 了 : 


61 ;[ 
82 "push ' ， 
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85 "unshift '， 
86 "splice', 

67 'sort', 

08 'reverse’" 

69 ] 


16 .forEach(function (method) { 
11 // 缓存 原始 方法 


12 const original = arrayProto[method] 

13 def(arrayMethods, method, function mutator (...args) { 
14 const result = original.apply(this, args) 

15 const ob = this. ob _ 

16 ob.dep.notify() // 向 依赖 发 送 消息 

17 return result 

18 }) 

19 )) 


在 上 面 的 代码 中 ， 我 们 调用 了 ob .dep.notify() 去 通知 依赖 (Watcher ) 数据 发 生 了 改变 。 


3.10” 侦 测 数组 中 元 素 的 变化 
前 面 说 过 如 何 侦 测 数组 的 变化 , 指 的 是 数组 自身 的 变化 ， 比 如 是 否 新 增 一 个 元 素 ,， 是 否 删 除 
一 个 元 素 等 。 


其 实数 组 中 保存 了 一 些 元 素 ， 它 们 的 变化 也 是 需要 侦 测 的 。 比 如 ， 当 数组 中 object 身上 某 
个 属性 的 值 发生 了 变化 时 ， 也 需要 发 送 通知 。 

此 外 ， 如 果 用 户 使 用 了 push 往 数组 中 新 增 了 元 素 ， 这 个 新 增 元 素 的 变化 也 需要 侦 测 。 

也 就 是 说 ， 所 有 响应 式 数据 的 子 数据 都 要 侦 测 ， 不 论 是 object 中 的 数据 还 是 Array 中 的 
数据 。 

这 里 我 们 先 介绍 如 何 侦 测 所 有 数据 子 集 的 变化 ， 下 一 节 再 来 介绍 如 何 侦 测 新 增 元 素 的 变化 。 


前 面 介绍 observer 时 说 过 ， 其 作用 是 将 object 的 所 有 属性 转换 为 getter/setter 的 形式 来 侦 
测 变化 。 现 在 observer 类 不 光 能 处 理 object 类 型 的 数据 ， 还 可 以 处 理 Array 类 型 的 数据 。 


所 以 ,我 们 要 在 observer 中 新 增 一 些 处 理 ， 让 它 可 以 将 Array 也 转换 成 响应 式 的 : 


861 export class Observer { 


62 constructor (value) { 

@3 this.value = value 

84 def(value, '_ ob ', this) 
85 

66 // 新 增 

67 if (Array.isArray(value)) { 
68 this.observeArray(value) 
69 } else { 

16 this.walk(value) 

1 } 

12 } 
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14 /** 
15 * 侦 测 Array 中 的 每 一 项 

16 */ 

17 observeArray (items) { 

18 for (let i = 8, 1 = items.length; i < 1; i++) { 
19 observe(items[i]) 

26 } 

21 } 

22 

23 ee 

24 } 


在 上 面 的 代码 中 ， 我 们 在 observer 中 新 增 了 对 Array 类 型 数据 的 处 理 逻 辑 。 


这 里 新 增 了 Fes 方法 , 其 作用 是 循环 Array 中 的 每 一 项 , 执行 observe 函数 来 侦 
测 变化 。 前 面 介绍 过 observe 函数 ， 其 实 就 是 将 数组 中 的 每 个 元 素 都 执行 一 遍 new 0bserver， 
这 很 明显 是 一 个 的 过 程 。 

现在 只 要 将 一 个 数据 丢 进 去 ，0bserver 就 会 把 这 个 数据 的 所 有 子 数据 转换 成 响应 式 的 。 接 
下 来 ， 我 们 介绍 如 何 侦 测 数组 中 新 增 元 素 的 变化 。 


3.11 侦 测 新 增 元 素 的 变化 


数组 中 有 一 些 方法 是 可 以 新 增 数组 内 容 的 ， 比 如 push， 而 新 增 的 内 容 也 需要 转换 成 响应 式 
来 侦 测 变化 ,否则 会 出 现 修改 数据 时 无 法 触发 消息 等 问题 。 因 此 , 我 们 必须 侦 测 数组 中 新 增 元 素 
的 变化 。 


其 实现 方式 其 实 并 不 难 ， 只 要 能 获取 新 增 的 元 素 并 使 用 Observer 来 侦 测 它们 就 行 。 


3.11.1 获取 新 增 元 素 


想 要 获取 新 增 元 素 , 我 们 需要 在 拦截 器 中 对 数组 方法 的 类 型 进行 判断 。 如 果 操 作 数 组 的 方法 
是 push、unshift 和 splice (可 以 新 增 数组 元 素 的 方法 )， 则 把 参数 中 新 增 的 元 素 拿 过 来 ， 用 
Observer 来 侦 测 ; 


el ;[ 

02 "push', 

63 "pop ， 

84 "shift"', 
@5 "unshift '， 
86 "splice', 
67 'sort', 

68 "reverse 
69  ] 


16 .forEach(function (method) { 

11 // 缓存 原始 方法 

12 const original = arrayProto[method] 

13 def(arrayMethods, method, function mutator (...args) { 
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14 const result = original.apply(this, args) 
15 const ob = this. ob __ 
16 let inserted 
17 switch (method) { 
18 case 'push': 
19 case “unshift' : 
26 inserted = args 
2 break 
22 case 'splice': 
23 inserted = args.slice(2) 
24 break 
25 
26 ob.dep.notify() 
27 return result 
28 }) 
29 )) 


在 上 面 的 代码 中 ， 我 们 通过 switch 对 method 进行 判断 ， 如 玉 
splice 这 种 可 以 新 增 数组 元 素 的 方法 , 那么 从 args 中 将 新 增 元 素 


接 下 来 ,我 们 要 使 用 Observer 


1 
LY 


3.11.2 ”使 用 observer 侦 测 新 增 元 素 


前 面 介 绍 过 observer 会 将 自身 的 实例 附加 到 value 的 _ob 


的 数据 都 有 一 个 _ob_ 属 性， 数组 元 素 也 不 例外 。 


method 是 push 、unshift、 


取出 来 , 暂 存在 inserted 中 。 


inserted 中 的 元 素 转换 成 响应 式 的 。 


属性 上 。 所 有 被 侦 测 了 变化 


因此 , 我 们 可 以 在 拦截 器 中 通过 this 访问 到 _ob ,然后 调用 _ob 上 的 observeArray 


方法 就 可 以 了 : 
el ;[ 
02 "push ' ， 
63 "pop ， 
64 "shift'， 
85 "unshift '， 
86 "splice', 
87 "sort ' ， 
68 "Peverse 
9 ] 
16 .forEach(function (method) { 
11 // 缓存 原始 方法 
12 const original = arrayProto[method] 
13 def(arrayMethods, method, function mutator (...args) { 
14 const result = original.apply(this, args) 
15 const ob = this. ob _ 
16 let inserted 
17 Switch (method) { 
18 case 'push': 
19 case "unshift ' : 
26 inserted = args 
21 break 
22 case 'splice': 


23 inserted = args.slice(2) 

24 break 

25 

26 if (inserted) ob.observeArray(inserted) // 新 增 
27 ob.dep.notify() 

28 return result 

29 }) 

30 }) 


在 上 面 的 代码 中 , 我 们 从 this. ob 上 拿 到 0bserver 实例 后 ， 如 果 有 新 增 元 素 ， 则 使 用 
ob .observeArray 来 侦 测 这 些 新 增 元 素 的 变化 。 


3.12 ”关于 Array 的 问题 


前 面 介 绍 过 ， 对 Array 的 变化 侦 测 是 通过 拦截 原型 的 方式 实现 的 。 正 是 因为 这 种 实现 方式 ， 
其 实 有 些 数组 操作 Vuejs 是 拦截 不 到 的 ， 例 如 : 

el this.list[6] = 2 
即 修 改 数 组 中 第 一 个 元 素 的 值 时 , 无 法 侦 测 到 数组 的 变化 , 所 以 并 不 会 触发 re-render 或 watch 
等 。 

例如 : 

61 this.list.length = 6 
这 个 清空 数组 操作 也 无 法 侦 测 到 数组 的 变化 ， 所 以 也 不 会 触发 re-render 或 watch 等 。 

因为 Vuejjs 的 实现 方式 决定 了 无 法 对 上 面 举 的 两 个 例子 做 拦截 ,也 就 没有 办 法 啊 应 。 在 ES6 
之 前 ,无 法 做 到 模拟 数组 的 原生 行为 ， 所 以 拦截 不 到 也 是 没有 办 法 的 事情 。ES6 提供 了 元 编程 的 
能 力 , 所 以 有 能 力 拦截 , 我 猜测 未 来 Vue.js 很 有 可 能 会 使 用 ES6 提供 的 Proxy 来 实现 这 部 分 功能 ， 
从 而 解决 这 个 问题 。 


3.13 总结 


Array 追踪 变化 的 方式 和 0bject 不 一 样 。 因 为 它 是 通过 方法 来 改变 内 容 的 ， 所 以 我 们 通过 
创建 拦截 器 去 覆盖 数组 原型 的 方式 来 追踪 变化 。 

为 了 不 污染 全 局 Array.prototype, 我 们 在 Observer 中 只 针对 那些 需要 侦 测 变化 的 数组 使 
用 _proto “来 覆盖 原型 方法 , 但 ”proto 在 ES6 之 前 并 不 是 标准 属性 ， 不 是 所 有 浏览 器 都 
支持 它 。 因 此 ， 针 对 不 支持 ”proto _ 属性 的 浏览 器 ， 我 们 直接 循环 拦截 器 ， 把 拦截 器 中 的 方 
法 直接 设置 到 数组 身上 来 拦截 Array .prototype 上 的 原生 方法 。 

Array 收集 依赖 的 方式 和 0bject 一 样 ,都 是 在 getter 中 收集 。 但 是 由 于 使 用 依赖 的 位 置 不 同 ， 
数组 要 在 拦截 器 中 向 依赖 发 消息 ， 所 以 依赖 不 能 像 object 那样 保存 在 defineReactive 中 ， 而 
是 把 依赖 保存 在 了 observer 实例 上 。 
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在 Observer 中 ,我 们 对 每 个 侦 测 了 变化 的 数据 都 标 上 印记 ob _， 并 把 this (Observer 

实例 ) 保存 在 ob 上 。 这 主要 有 两 个 作用 , 一 方面 是 为 了 标记 数据 是 否 被 侦 测 了 变化 ( 保证 同 
个 数据 只 被 侦 测 一 次 ), 另 一 方面 可 以 很 方便 地 通过 数据 取 到 ”ob ,从 而 拿 到 observer 实例 

上 保存 的 依赖 。 当 拦截 到 数组 发 生变 化 时 ， 向 依赖 发 送 通知 。 

除了 侦 测 数组 自身 的 变化 外 ， 数 组 中 元 素 发 生 的 变化 也 要 侦 测 。 我 们 在 observer 中 判断 如 
果 当 前 被 侦 测 的 数据 是 数组 ， 则 调用 observeArray 方法 将 数组 中 的 每 一 个 元 素 都 转换 成 响应 式 
的 并 侦 测 变化 。 

除了 侦 测 已 有 数据 外 ， 当 用 户 使 用 push 等 方法 向 数组 中 新 增 数 据 时 ， 新 增 的 数据 也 要 进行 
变化 侦 测 。 我 们 使 用 当前 操作 数组 的 方法 来 进行 判断 ， 如 果 是 push、unshift 和 splice 方法 ， 
则 从 参数 中 将 新 增 数据 提取 出 来 ， 然 后 使 用 observeArray 对 新 增 数 据 进行 变化 侦 测 。 

由 于 在 ES6 之 前 ，JavaScript 并 没有 提供 元 编程 的 能 力 ， 所 以 对 于 数组 类 型 的 数据 ， 一 些 语 
法 无 法 追踪 到 变化 ， 只 能 拦截 原型 上 的 方法 ， 而 无 法 拦截 数组 特有 的 语法 ， 例 如 使 用 length 清 
空 数组 的 操作 就 无 法 拦截 。 


变化 侦 测 相关 的 API 实现 
原理 Fen 


本 章 将 介绍 儿 个 与 变化 侦 测 相关 的 常用 API 的 内 部 原理 。 


4.1 vm.$watch 


经 常 使 用 Vue.js 的 同学 肯定 对 vm.$watch 并 不 陌生 ， 本 节 将 探索 它 的 内 部 究竟 是 怎样 的 。 


4.1.1 用 法 
在 介绍 vm.$watch 的 内 部 原理 之 前 ， 先 简单 回顾 一 下 它 的 用 法 : 


61 vm.$watch( expOrFn, callback, [options] ) 


口 参数 : 


m {string | Function} expOorFn 
m {Function | Object} callback 
四 {Object}+ [options] 


> {boolean} deep 
> {boolean} immediate 


口 返回 值 : {Function} unwatch 

口 用 法 : 用 于 观察 一 个 表达 式 或 computed 函数 在 Vuejs 实 例 上 的 变化 。 回 调 函 数 调 用 时 ， 
会 从 参数 得 到 新 数据 (new value ) 和 旧 数 据 ( old value ) 。 表 达 式 只 接受 以 点 分 隔 的 路 径 ， 
例如 a.b.c。 如 果 是 一 个 比较 复杂 的 表达 式 ， 可 以 用 函数 代替 表达 式 。 


例如 : 


61 vm.$watch('a.b.c', function (newVal, oldVal) { 
62 // 做 点 什么 
63 )) 
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vm.$watch 返回 一 个 取消 观察 函数 ， 用 来 停止 触发 回调 : 
61 var unwatch = vm.$watch('a', (newVal, oldVal) => {}) 
862 // 之 后 取消 观察 
0@3 unwatch() 
最 后 ， 简 要 介绍 一 下 [options] 的 两 个 选项 deep 和 immediate。 

口 deep。 为 了 发 现 对 象 内 部 值 的 变化 ， 可 以 在 选项 参数 中 指定 deep: true: 
61 vm.$watch('someObject', callback, { 
02 deep: true 
63 })) 
64 vm.someObject.nestedValue = 123 
65 // 回调 函数 将 被 触发 
这 里 需要 注意 的 是 ， 监 昕 数组 的 变动 不 需要 这 么 做 。 

口 immediate。 在 选项 参数 中 指定 immediate: true， 将 立即 以 表达 式 的 当前 值 触发 回调 : 
61 vm.$watch('a', callback, { 
02 immediate: true 
e3 })) 
84 // 立即 以 'a' 的 当前 值 触发 回调 

4.1.2 watch 的 内 部 原理 
vm.$watch 其 实 是 对 Watcher 的 一 种 封装 ,Watcher 的 原理 在 第 2 章 中 介绍 过 ,通过 Watcher 


完全 可 以 实现 vm. $watch 的 功能 ， 但 vm. $watch 中 的 参数 deep 和 immediate 是 Watcher 中 所 


没有 的 


61 
82 
83 
94 
85 
86 
87 
68 
89 
16 
于 二 


。 下 面 我 们 来 看 一 看 vm. $watch 到 底 是 怎么 实现 的 : 


Vue.prototype.$watch = function (expOrFn, cb, options) { 
const vm = this 
options = options || {} 
const watcher = new Watcher(vm, expOrFn, cb, options) 
if (options.immediate) { 
cb.call(vm, watcher.value) 
} 
return function unwatchFn () { 
watcher.teardown() 
} 
} 


可 以 看 到 ， 代 码 不 多 ， 逻 辑 也 不 算 复杂 。 先 执行 new Watcher 来 实现 vm.$watch 的 基本 功能 。 
这 里 有 一 个 细节 需要 注意 ，exporFn 是 支持 函数 的 ， 而 我 们 在 第 2 章 中 并 没有 介绍 。 这 里 我 
们 需要 对 watcher 进行 一 个 简单 的 修改 ， 具 体 如 下 : 


81 
82 
83 
04 
85 
86 


export default class Watcher { 
constructor (vm, expOrFn, cb) { 
this.vm = vm 
// expOrFn 参数 支持 函数 
if (typeof expOrFn === 'function') { 
this.getter = expOrFn 
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67 } else { 

88 this.getter = parsePath(expOrFn) 
69 } 

16 this.cb = cb 

11 this.value = this.get() 


上 面 的 代码 新 增 了 判断 exporFn 类 型 的 逻辑 。 如 果 exporFn 是 函数 ， 则 直接 将 它 赋 值 给 
getter; 如 果 不 是 函数 ， 再 使 用 parsePath 函数 来 读 取 keypath 中 的 数据 。 这 里 keypath 指 的 
是 属性 路 径 ， 例 如 a.b.c.d 就 是 一 个 keypath， 说 明 从 vm.a.b.c.d 中 读 取 数据 。 

当 exporFn 是 函数 时 , 会 发 生 很 神奇 的 事情 。 它 不 只 可 以 动态 返回 数据 , 其 中 读 取 的 所 有 数 
据 也 都 会 被 Watcher 观察 。 当 exporFn 是 字符 串 类 型 的 keypath 时 ,Watcher 会 读 取 这 个 keypath 
所 指向 的 数据 并 观察 这 个 数据 的 变化 。 而 当 exporFn 是 函数 时 ，Watcher 会 同时 观察 exporFn 
函数 中 读 取 的 所 有 Vuejs 实例 上 的 响应 式 数 据 。 也 就 是 说 ， 如 果 函 数 从 Vuejs 实例 上 读 取 了 两 个 
数据 , 那么 Watcher 会 同时 观察 这 两 个 数据 的 变化 ， 当 其 中 任意 一 个 发 生变 化 时 ,Watcher 都 会 
得 到 通知 。 


说 明 ”事实 上 ,Vuejs 中 计算 属性 (Computed ) 的 实现 原理 与 expOrFn 支持 函数 有 很 大 的 关系 ， 
我 们 会 在 后 面 的 章节 中 详细 介绍 。 


执行 new Watcher 后 ， 代 码 会 判断 用 户 是 否 使 用 了 immediate 参数 ， 如 果 使 用 了 ， 则 立即 
执行 一 次 cb。 

最 后 ， 返 回 一 个 函数 unwatchFn。 顾 名 思 义 ， 它 的 作用 是 取消 观察 数据 。 

当 用 户 执 行 这 个 函数 时 ， 实 际 上 是 执行 了 watcher .teardown() 来 取消 观察 数据 ， 其 本 质 是 
把 watcher 实例 从 当前 正在 观察 的 状态 的 依赖 列表 中 移 除 。 

前 面 介绍 Watcher 时 并 没有 介绍 teardown 方法 ， 现 在 要 在 Watcher 中 添加 该 方法 来 实现 
unwatch 的 功能 。 

首先 ， 需 要 在 Watcher 中 记录 自己 都 订阅 了 谁 ， 也 就 是 watcher 实例 被 收集 进 了 哪些 Dep 
里 。 然 后 当 Watcher 不 想 继续 订阅 这 些 Dep 时 ,循环 自己 记录 的 订阅 列表 来 通知 它们 (Dep ) 将 
自己 从 它们 (Dep ) 的 依赖 列表 中 移 除 掉 。 

因此 ， 我 们 要 把 收集 依赖 那 部 分 的 代码 做 一 个 小 小 的 改动 。 


先 在 Watcher 中 添加 addDep 方法 ， 该 方法 的 作用 是 在 Watcher 中 记录 自己 都 订阅 过 哪些 
Dep : 
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861 export default class Watcher { 


02 constructor (vm, expOrFn, cb) { 
@3 this.vm = vm 

@4 this.deps = [] // 新 增 

65 this.depIds = new Set() // 新 增 
66 this.getter = parsePath(expOrFn) 
87 this.cb = cb 

68 this.value = this.get() 

69 } 

16 

11 … 

12 

3 addDep (dep) { 

14 const id = dep.id 

15 if (!this.depIds.has(id)) { 
16 this.depIds .add(id) 

17 this.deps.push(dep) 

18 dep.addsub(this) 

19 } 

26 } 

21 

22 

23 } 


在 上 述 代 码 中 ， 我 们 使 用 depIds 来 判断 如 果 当 前 Watcher 已 经 订阅 了 该 Dep， 则 不 会 重复 
订阅 。 在 第 2 章 中 ， 我 们 介绍 过 Watcher 读 取 value 时 ,会 触发 收集 依赖 的 逻辑 。 当 依赖 发 生 
变化 时 , 会 通知 Watcher 重新 读 取 最 新 的 数据 。 如 果 没 有 这 个 判断 ， 就 会 发 现 每 当 数据 发 生 了 变 
化 ,Watcher 都 会 读 取 最 新 的 数据 。 而 读数 据 就 会 再 次 收集 依赖 ,这 就 会 导致 Dep 中 的 依赖 有 重 
复 。 这 样 当 数 据 发 生变 化 时 ,会 同时 通知 多 个 Watcher。 为 了 避免 这 个 问题 ,只 有 第 一 次 触发 getter 
的 时 候 才 会 收集 依赖 。 

接着 ,执行 this.depIds.add 来 记录 当前 Watcher 已 经 订阅 了 这 个 Dep。 

然后 执行 this.deps .push(dep) 记 录 自 己 都 订阅 了 哪些 Dep。 

最 后 ， 触 发 dep.addsub(this) 来 将 自己 订阅 到 Dep 中 。 

在 Watcher 中 新 增 addDep 方法 后 ，Dep 中 收集 依赖 的 逻辑 也 需要 有 所 改变 : 


61 let uid = 8 // 新 增 


62 

63 export default class Dep { 
@4 constructor () { 

65 this.id = uid++ // 新 增 
66 this.subs = [] 

67 } 

68 

9  ……… 

16 

11 depend () { 

12 if (window.target) { 


13 this.addsubQwindew.tatget}》 // 废 弃 
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14 window.target.addDep(this) // 新 增 


此 时 ，Dep 会 记录 数据 发 生变 化 时 ,需要 通知 哪些 Watcher ， 而 Watcher 中 也 同样 记录 了 自 
己 会 被 哪些 Dep 通知 。 它 们 其 实 是 多 对 多 的 关系 ， 如 图 4-1 所 示 。 


ee | 
| ~ 个 


六 
和 1 


图 4-1 Watcher 与 Dep 的 关系 
有 些 人 可 能 会 感到 困惑 ， 为 什么 是 多 对 多 的 关系 。Watcher 每 次 只 读 一 个 数据 ,不 是 应 该 只 
有 一 个 Dep 吗 ? 
其 实 不 是 。 如果 Watcher 中 的 exporFn 参数 是 一 个 表达 式 , 那么 肯定 只 收集 一 个 Dep, 并 且 
大 部 分 都 是 这 样 。 但 凡事 总 有 例外 ，exporFn 可 以 是 一 个 函数 ， 此 时 如 果 该 函数 中 使 用 了 多 个 数 
据 ， 那 么 这 时 Watcher 就 要 收集 多 个 Dep 了 ， 例 如 : 


61 this.$watch(function () { 


92 return this.name + this.age 

63 }, function (newValue, oldValue) { 
84 console.log(newValue, oldValue) 
e5 }) 


在 上 面 这 个 例子 中 , 我 们 的 表达 式 是 一 个 函数 , 并 且 在 函数 中 访问 了 name 和 age 两 个 数据 ， 
这 种 情况 下 Watcher 内 部 会 收集 两 个 Dep 一 一 name 的 Dep 和 age 的 Dep， 同 时 这 两 个 Dep 中 也 
会 收集 Watcher， 这 导致 age 和 name 中 的 任意 一 个 数据 发 生变 化 时 ，Watcher 都 会 收 到 通知 。 


言 归 正 传 ， 当 我 们 已 经 在 Watcher 中 记录 自己 都 订阅 了 哪些 Dep 之 后 ， 就 可 以 在 Watcher 
中 新 增 teardown 方法 来 通知 这 些 订 阅 的 Dep， 让 它们 把 自己 从 依赖 列表 中 移 除 掉 : 


e1 /** 

02 * 从 所 有 依赖 项 的 Dep 列表 中 将 自己 移 除 
03 */ 

64 teardown () { 

@5 let i = this.deps.length 

66 while (i--) { 

87 this.deps[i].removeSub(this) 
88 
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上 面 做 的 事情 很 简单 ， 只 是 循环 订阅 列表 ， 然 后 分 别 执行 它们 的 removesub 方法 ， 来 把 自 
己 从 它们 的 依赖 列表 中 移 除 掉 。 接 下 来 ， 看 看 removesub 中 都 发 生 了 什么 : 


861 export default class Dep { 


65 removeSub (sub) { 

66 const index = this.subs.indexof(sub) 
87 if (index > -1) { 

68 return this.subs.splice(index, 1) 


上 面 的 代码 把 Watcher 从 sub 中 删除 掉 ， 然 后 当 数 据 发 生变 化 时 ， 将 不 再 通知 这 个 已 经 市 
除 的 Watcher ， 这 就 是 unwatch 的 原理 。 


4.1.3 ”deep 参数 的 实现 原理 
最 后 ， 我 们 说 说 deep 参数 的 实现 原理 。 
在 本 书 第 一 篇 中 ， 我 们 主要 介绍 的 无 非 是 收集 依赖 和 触发 依赖 ，watcher 想 监听 某 个 数据 ， 
就 会 触发 某 个 数据 收集 依赖 的 逻辑 , 将 自己 收集 进去 , 然后 当 它 发 生变 化 时 , 就 会 通知 Watcher。 
要 想 实现 deep 的 功能 ， 其 实 就 是 除了 要 触发 当前 这 个 被 监听 数据 的 收集 依赖 的 逻辑 之 外 ， 还 要 
把 当前 监听 的 这 个 值 在 内 的 所 有 子 值 都 触发 一 遍 收集 依赖 逻辑 。 这 就 可 以 实现 当前 这 个 依赖 的 所 
有 子 数据 发 生变 化 时 ， 通 知 当 前 Watcher 了 。 


有 具体 实现 如 下 : 

861 export default class Watcher { 

62 constructor (vm, expOrFn, cb, options) { 
@3 this.vm = vm 

84 

85 // 新 增 

66 if (options) { 

67 this.deep = !!options.deep 

68 } else { 

69 this.deep = false 

16 } 

二 二 

12 this.deps = [] 

13 this.depIds = new Set() 

14 this.getter = parsePath(expOrFn) 
15 this.cb = cb 

16 this.value = this.get() 

17 } 

18 


19 get () { 
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26 window.target = this 

21 let value = this.getter.call(vm, vm) 
22 // 新 增 

23 if (this.deep) { 

24 traverse(value) 

25 } 

26 window.target = undefined 
27 return value 

28 } 

29 

30 … 

31 } 


在 上 面 的 代码 中 ， 如 果 用 户 使 用 了 deep 参数 ， 则 在 window.target = undefined 之 前 调 
用 traverse 来 处 理 deep 的 逻辑 。 

这 里 非常 强调 的 一 点 是 ， 一 定 要 在 window.target = undefined 之 前 去 触发 子 值 的 收集 依 
赖 逻 辑 , 这 样 才能 保证 子 集 收 集 的 依赖 是 当前 这 个 Watcher。 如 果 在 window.target = undefined 
之 后 去 触发 收集 依赖 的 逻辑 , 那么 其 实 当前 的 Watcher 并 不 会 被 收集 到 子 值 的 依赖 列表 中 , 也 就 
无 法 实现 deep 的 功能 。 

接 下 来 ， 要 递归 value 的 所 有 子 值 来 触发 它们 收集 依赖 的 功能 : 


61 const seenObjects = new Set() 


ttt 


62 

63 export function traverse (val) { 

84 _traverse(val, seenObjects) 

85 seenObjects.clear() 

06 } 

87 

68 function _traverse (val, seen) { 

09 let i, keys 

16 const isA = Array.isArray(val) 

1 if ((!1isA && !isobject(val)) || Object.isFrozen(val)) { 
12 return 

13 } 

14 if (val. ob ) { 

15 const depId = val. ob _ .dep.id 

16 if (seen.has(depId)) { 

17 return 

18 } 

19 seen.add(depId) 

20 } 

21 if (isA) { 

22 i = val.length 

23 while (i--) _traverse(val[i], seen) 
24 } else { 

25 keys = Object.keys(val) 

26 i = keys.length 

27 while (i--) _traverse(val[keys[i]], seen) 
28 } 


29 } 
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这 里 我 们 先 判断 val 的 类 型 ， 如 果 它 不 是 Array 和 0bject， 或 者 已 经 被 冻结 ， 那 么 直接 返 
回 ， 什 么 都 不 干 。 

然后 拿 到 val 的 dep.id， 用 这 个 id 来 保证 不 会 重复 收集 依赖 。 

如 果 是 数组 ， 则 循环 数组 ， 将 数组 中 的 每 一 项 递归 调用 _traverse。 

最 后 , 重点 来 了 ， 如 果 是 object 类 型 的 数据 ， 则 循环 object 中 的 所 有 key， 然 后 执行 一 次 
读 取 操作 ， 再 递归 子 值 ; 

61 while (i--) _traverse(val[keys[i]], seen) 
其 中 val[keys[i]] 会 触发 getter， 也 就 是 说 会 触发 收集 依赖 的 操作 ， 这 时 window.target 还 没 
有 被 清空 ， 会 将 当前 的 Watcher 收集 进去 。 这 也 是 前 面 我 强调 的 一 定 要 在 window.target = 
undefined 这 个 语句 之 前 触发 收集 依赖 的 原因 。 

而 _traverse 函数 其 实 是 一 个 递归 操作 ， 所 以 这 个 value 的 子 值 也 会 触发 同样 的 逻辑 ， 这 
样 就 可 以 实现 通过 deep 参数 来 监听 所 有 子 值 的 变化 。 


4.2 vm.$set 
在 Vue.js 中 ，vm.$set 也 是 一 个 比较 常用 的 API， 我 们 先 简 单 回顾 一 下 它 的 用 法 。 


4.2.1 用 法 
vm.$set 的 用 法 如 下 。 


81 vm.$set( target, key, value ) 
口 参数 : 


m {Object | Array} target 
m {string | number} key 


@m {any} value 


口 返回 值 : {Function} unwatch 

口 用 法 : 在 object 上 设置 一 个 属性 ， 如 果 object 是 响应 式 的 ，Vue.js 会 保证 属性 被 创建 
后 也 是 响应 式 的 ， 并 且 触 发 视图 更 新 。 这 个 方法 主要 用 来 避 开 Vue.js 不 能 侦 测 属 性 被 添 
加 的 限制 。 


注意 target 不 能 是 Vue.js 实例 或 者 Vue.js 实例 的 根 数据 对 象 。 


前 面 我 们 介绍 了 变化 侦 测 原理 ， 所 以 对 于 追踪 变化 的 方式 , 大 家 应 该 已 经 很 熟 了 。 只 有 已 经 
存在 的 属性 的 变化 会 被 追踪 到 ， 新 增 的 属性 无 法 被 追踪 到 。 因 为 在 ES6 之 前 ，JavaScript 并 没有 
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提供 元 编程 的 能 力 ， 所 以 根本 无 法 侦 测 object 什么 时 候 被 添加 了 一 个 新 属性 。 


而 vm.$set 就 是 为 了 解决 这 个 问题 而 出 现 的 。 使 用 它 , 可 以 为 object 新 增 属性 , 然后 Vue.js 
就 可 以 将 这 个 新 增 属性 转换 成 响应 式 的 。 


举 个 例子 : 
61 var vm = new Vue({ 
602 el: '#el’', 
83 template: '#demo-template', 
84 data: { 
685 obj: {} 
66 
e7 }) 
述 代码 中 ，data 中 有 一 个 obj 对 象 。 如 果 直 接 给 obj 设置 一 个 属性 ， 例 如: 
61 var vm = new Vue({ 
02 el: '#el', 
83 template: '#demo-template', 
84 methods: { 
685 action () { 
86 this.obj.name = "berwin 
67 } 
68 }, 
69 data: { 
16 obj: {} 
1 
12 )) 
当 action 方法 被 调用 时 ， 会 为 obj 新 增 一 个 name 属性 ， 而 Vue.js 并 不 会 得 到 任何 通知 。 


新 增 的 这 个 属性 也 不 是 响应 式 的 ，Vue.js 根本 不 知道 这 个 obj 新 增 了 属性 ， 就 好 像 Vue.js 无 法 知 
道 我 们 使 用 array .length = 9 清空 了 数组 一 样 。 


Vm 。 


61 
92 


$set 就 可 以 解决 这 个 事情 。 我 们 来 看 看 vm.$set 是 如 何 实现 的 : 


import { set } from '../observer/index' 
Vue.prototype.$set = set 


这 里 我 们 在 Vue.jjs 的 原型 上 设置 $set 属性 ,其 实 我 们 使 用 的 所 有 以 vm.$ 开头 的 方法 都 是 在 
Vuejjs 的 原型 上 设置 的 。vm.$set 的 具体 实现 其 实 是 在 observer 中 抛 出 的 set 方法 。 


所 以 ， 我 们 先 创建 一 个 set 方法 : 


61 
02 
93 


4.2.2 


export function set (target, key, val) { 
// 做 点 什么 
} 


Array 的 处 理 


上 面 我 们 创建 了 set 方法 并 且 规 定 它 接收 3 个 参数 , 这 3 个 参数 与 vm.$set API 规定 的 需要 
传递 的 参数 一 致 。 
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接 下 来 ， 我 们 需要 对 target 是 数组 的 情况 进行 处 理 : 


861 export function set (target, key, val) { 


62 if (Array.isArray(target) && isVvValidArrayIndex(key)) { 
63 target.length = Math.max(target.length, key) 

@4 target.splice(key, 1, val) 

65 return val 

66 } 

67 } 


在 上 面 的 代码 中 ， 如 果 target 是 数组 并 且 key 是 一 个 有 效 的 索引 值 ， 就 先 设置 length 
属性 。 这 样 如 果 我 们 传递 的 索引 值 大 于 当前 数组 的 length， 就 需要 让 target 的 length 等 于 
索引 值 。 

接 下 来 ， 通 过 splice 方法 把 val 设置 到 target 中 的 指定 位 置 (参数 中 提供 的 索引 值 的 位 
置 )。 当 我 们 使 用 splice 方法 把 val 设置 到 target 中 的 时 候 ， 数 组 拦截 器 会 侦 测 到 target 发 
生 了 变化 ， 并 且 会 自动 帮助 我 们 把 这 个 新 增 的 val 转换 成 响应 式 的 。 

最 后 ， 返 回 val 即 可 。 


4.2.3 key 已 经 存在 于 target 中 
接 下 来 ， 需 要 处 理 参数 中 的 key 已 经 存在 于 target 中 的 情况 : 


861 export function set (target, key, val) { 


62 if (Array.isArray(target) && isValidArrayIndex(key)) { 
03 target.length = Math.max(target.length, key) 

@4 target.splice(key, 1, val) 

65 return val 

66 } 

e7 

68 // 新 增 

69 if (key in target && !(key in Object.prototype)) { 
16 target[key] = val 

11 return val 

12 } 

13 } 


由 于 key 已 经 存在 于 target 中 ， 所 以 其 实 这 个 key 已 经 被 侦 测 了 变化 。 也 就 是 说 ， 这 种 情 
况 属 于 修改 数据 , 直接 用 key 和 val 改 数据 就 好 了 。 修改 数据 的 动作 会 被 Vuejs 侦 测 到 ,所 以 数 
据 发 生变 化 后 ， 会 自动 向 依赖 发 送 通 知 。 


4.2.4 处理 新 增 的 属性 
终于 到 了 重头 戏 ， 现 在 来 处 理 在 target 上 新 增 的 key: 


861 export function set (target, key, val) { 

62 if (Array.isArray(target) && isValidArrayIndex(key)) { 
03 target.length = Math.max(target.length, key) 

@4 target.splice(key, 1, val) 
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65 return val 

66 } 

87 

88 if (key in target && !(key in Object.prototype)) { 
89 target[key] = val 

16 return val 

11 } 

2 

13 // 新 增 

14 const ob = target. ob _ 

15 if (target. isVue || (ob && ob.vmCount)) { 

16 process.env.NODE_ENV !== 'production' && warn( 
17 "Avoid adding reactive properties to a Vue instance or its root $data ' + 
18 "at runtime - declare it upfront in the data option."' 
19 ) 

20 return val 

21 

22 if (lob) { 

23 target[key] = val 

24 return val 

25 } 

26 defineReactive(ob.value, key, val) 

27 ob.dep.notify() 

28 return val 

29 } 


在 上 面 的 代码 中 ,我们 最 先 做 的 事情 是 获取 target 的 __ob__ 属性 。 
然后 要 人 处理 文档 中 所 说 的 “target 不 能 是 Vuejjs 实例 或 Vuejs 实例 的 根 数据 对 象 ” 的 情况 。 


实现 这 个 功能 并 不 难 ， 只 需要 使 用 target._isVue 来 判断 target 是 不 是 Vue.js 实例 , 使 用 
ob.vmCount 来 判断 它 是 不 是 根 数据 对 象 即 可 。 

对 于 ob.vmcount ， 我 们 是 陌生 的 ， 后 面 会 详细 介绍 ,这 里 只 要 知道 通过 它 可 以 判断 target 
是 不 是 根 数据 就 行 了 。 
那么 ， 什 么 是 根 数据 ?this.$data 就 是 根 数据 。 
接 下 来 ,我 们 处 理 target 不 是 响应 式 的 情况 。 如 果 target 身上 没有 __ob 属性， 说 明 它 
并 不 是 响应 式 的 ， 并 不 需要 做 什么 特殊 处 理 ， 只 需要 通过 key 和 val 在 target 上 设置 就 行 了 。 

如 果 前 面 的 所 有 判断 条 件 都 不 满足 , 那么 说 明 用 户 是 在 响应 式 数 据 上 新 增 了 一 个 属性 , 这 种 
情况 下 需要 追踪 这 个 新 增 属性 的 变化 ， 即 使 用 defineReactive 将 新 增 属 性 转换 成 getter/setter 
的 形式 即 可 。 

最 后 ， 向 target 的 依赖 触发 变化 通知 ， 并 返回 val。 


和 


4.3 vm.$delete 
vm.$delete 的 作用 是 删除 数据 中 的 某 个 属 牧 


。 由 于 Vuejs 的 变化 侦 测 是 使 用 object. 


PT 
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defineProperty 实现 的 ， 所 以 如 果 数 据 是 使 用 delete 关键 字 删 除 的 ， 那 么 无 法 发 现 数据 发 生 
了 变化 。 为 了 解决 这 个 问题 ，Vue.js 提供 了 vm.$delete 方法 来 删除 数据 中 的 某 个 属性 ， 并 且 此 
时 Vuejs 可 以 侦 测 到 数据 发 生 了 变化 。 


4.3.1 用 法 
vm.$delete 的 用 法 如 下 : 


81 vm.$delete( target, key ) 
口 参数 : 


m {Object | Array} target 
m {string | number} key/index 


说 明 仅 在 2.2.0+ 版 本 中 支持 Array+index 的 用 法 。 


口 用 法 : 删除 对 象 的 属性 。 如 果 对 象 是 响应 式 的 ， 需 要 确保 删除 能 触发 更 新 视图 。 这 个 方 
法 主要 用 于 避 开 Vuejs 不 能 检测 到 属性 被 删除 的 限制 ， 但 是 你 应 该 很 少 会 使 用 它 。 


在 2.2.0+ 中 ， 同 样 支持 在 数组 上 工作 。 


注意 ”目标 对 象 不 能 是 Vue.js 实例 或 Vue.js 实例 的 根 数据 对 象 。 


4.3.2 ”实现 原理 


vm.$delete 方法 也 是 为 了 解决 变化 侦 测 的 缺陷 。 在 ES6 之 前 ，JavaScript 并 没有 办 法 侦 测 到 
一 个 属性 在 object 中 被 删除 ,所 以 如 果 使 用 delete 来 删除 一 个 属性 ，Vuejs 根本 不 知道 这 个 必 
性 被 删除 了 。 

那么 ,怎样 才能 让 Vue.js 知道 我 们 删除 了 一 个 属性 或 者 从 数组 中 删除 了 一 个 元 素 呢 ? 答案 是 使 
用 vm.$delete。 它 帮助 我 们 在 删除 属性 后 自动 向 依赖 发 送 消息 ， 通 知 Watcher 数据 发 生 了 变化 。 

如 果 你 非 要 使 用 delete 来 删除 属性 ， 那 么 我 告诉 你 一 个 特别 取 巧 的 方法 ， 虽然 我 并 不 推荐 
你 这 样 做 : 

91 delete this.obj.name 

62 this.obj. ob .dep.notify() // 手动 向 依赖 发 送 变化 通知 


使 用 delete 删除 属性 后 ，Vue.js 虽然 不 知道 属性 被 删除 了 ， 但 是 我 们 知道 ， 我 们 替 Vue.js 
触发 消息 ! 
我 强烈 不 推荐 这 样 写 代码 ， 这 里 主要 是 为 了 讲解 vm.$delete 的 原理 。 
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其 实 vm.$delete 内 部 的 实现 原理 和 上 面 例子 中 写 的 代码 非常 类 似 ， 就 是 删除 属性 后 向 依赖 
发 消息 : 


61 import { del } from '../observer/index' 
82 Vue.prototype.$delete = del 


上 面 的 代码 先 在 Vue.js 的 原型 上 挂 载 $.delete 方法 。 而 del 函数 的 定义 如 下 : 


81 export function del (target, key) { 


02 const ob = target. ob 
83 delete target[key] 

84 ob .dep.notify() 

65 } 


这 里 先 从 target 中 将 属性 key 删除 ， 然 后 向 依赖 发 送 消息 。 
接 下 来 ， 要 处 理 数 组 的 情况 : 


061 export function del (target, key) { 


02 // 新 增 

83 if (Array.isArray(target) && isValidArrayIndex(key)) { 
84 target.splice(key, 1) 

85 return 

66 

87 const ob = (target). ob _ 

88 delete target[key] 

89 ob .dep.notify() 

16 } 


数组 的 处 理 逻 辑 和 vm.$set 中 差不多 , 不 过 没 那么 复杂 。 因 为 只 需要 处 理 删 除 的 情况 , 所 以 
只 需要 使 用 splice 将 参数 key 所 指定 的 索引 位 置 的 元 素 删 除 即 可 。 因 为 使 用 了 splice 方法 ， 
数组 拦截 器 会 自动 向 依赖 发 送 通知 。 

与 vm.$set 一 样 ，vm.$delete 也 不 可 以 在 Vuejs 实例 或 Vue.js 实例 的 根 数据 对 象 上 使 用 。 

此 ， 我们 需要 对 这 种 情况 进行 判断 : 


601 export function del (target, key) { 


82 if (Array.isArray(target) && isValidArrayIndex(key)) { 
83 target.splice(key, 1) 

@4 return 

65 } 

66 const ob = target. ob 

87 // 新 增 

08 if (target. isVue || (ob && ob.vmCount)) { 

89 process.env.NODE_ENV !== 'production' && warn( 

16 "Avoid deleting properties on a Vue instance or its root $data ' + 
11 '- just set it to null.' 

Ey ) 

13 return 

14 } 

15 delete target[key] 


16 ob.dep.notify() 
1 人 
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上 面 的 代码 中 新 增 了 判断 逻辑 : 如 果 target 上 有 _isvue 属性 (target 是 Vue.js 实例 ) 或 
者 ob.vmCount 数量 大 于 1 (target 是 根 数据 )， 则 直接 返回 ， 终 止 程序 继续 执行 ， 并 且 如 果 是 
开发 环境 ， 会 在 控制 台中 发 出 警告 。 

如 果 删 除 的 这 个 key 不 是 target 自身 的 属性 ， 就 什么 都 不 做 ， 直 接 退 出 程序 执行 : 


61 export function del (target, key) { 


62 if (Array.isArray(target) && isValidArrayIndex(key)) { 
63 target.splice(key，1) 

64 return 

65 } 

86 const ob = target. ob _ 

67 if (target. isVue || (ob && ob.vmCount)) { 

68 process.env.NODE_ENV !== 'production' && warn( 

69 "Avoid deleting properties on a Vue instance or its root $data ' + 
16 "- just set it to null.’ 

1 ) 

12 return 

13 } 

14 


15 // 如 果 key 不 是 target 自身 的 属性 ， 则 终止 程序 继续 执行 
16 if (!hasown(target，key)) { 


17 return 

18 } 

19 delete target[key] 
26 ob .dep.notify() 

21 } 


如 果 删 除 的 这 个 key 在 target 中 根本 不 存在 ,那么 其 实 并 不 需要 进行 删除 操作 ， 也 不 需要 
向 依赖 发 送 通知 。 


还 要 判断 target 是 不 是 一 个 响应 式 数据 ， 也 就 是 说 要 判断 target 身上 存 不 存在 
这 相 只 有 响应 式 数据 才 需 要 发 送 通 知 ， 非 响应 式 数据 只 需要 执行 删除 操作 即 可 。 
下 面 这 段 代 码 新 增 了 判断 条 件 ， 如 果 数 据 不 是 响应 式 的 ， 则 使 用 return 语句 阻止 执行 发 送 
通知 的 语句 : 


891 export function del (target, key) { 


ll 


82 if (Array.isArray(target) && isValidArrayIndex(key)) { 
03 target.splice(key, 1) 

64 return 

85 } 

66 const ob = target. ob 

67 if (target. isVue || (ob && ob.vmCount)) { 

68 process.env.NODE_ENV !== 'production' && warn( 

69 "Avoid deleting properties on a Vue instance or its root $data ' + 
16 "- just set it to null.’ 

11 ) 

12 return 

13 } 

14 


15 if (!hasOwn(target, key)) { 
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16 return 
17 
18 delete target[key] 
19 


20 // 如 果 ob 不 存在 ， 则 直接 终止 程序 
21 if (!ob) { 
2 之 return 


} 
24 ob.dep.notify() 
25 } 


在 上 面 的 代码 中 ， 我 们 在 删除 属性 后 判断 ob 是 否 存在 ， 如 果 不 存在 ， 则 直接 终止 程序 ， 继 
续 执 行 下 面 发 送 变化 通知 的 代码 。 


4.4 总 结 


本 章 中 ， 我 们 详细 介绍 了 变化 侦 测 相 关 API 的 内 部 实现 原理 。 

我 们 先 介 绍 了 vm.gwatch 的 内 部 实现 及 其 相关 参数 的 实现 原理 ， 包 括 deep 、immediate 和 
unwatch。 

随后 介绍 了 vm.$set 的 内 部 实现 。 这 里 介绍 了 几 种 情况 ， 分 别 为 Array 的 处 理 逻 辑 ，key 
已 经 存在 的 处 理 逻 辑 ， 以 及 最 重要 的 新 增 属 性 的 处 理 逻 辑 。 

最 后 ， 介 绍 了 vm.$delete 的 内 部 实现 原理 


O 


和 大生 一 /一 


叮 一 局 


虚拟 DOM 


Vuejs 2.0 引入 了 虚拟 DOM， 比 Vuejs 1.0 的 初始 泻 染 速度 提升 了 2~4 倍 ， 并 大 大 降低 了 内 
存 消耗 。 

虚拟 DOM 也 是 React 核心 技术 之 一 。 它 到 底 有 着 怎样 的 魔力 ， 使 前 端 界 各 大 主流 框架 都 纷 
纷 使 用 ? 

你 是 否 好 奇 ， 虚 拟 DOM 的 原理 是 什么 ? 

你 是 否 好 奇 ， 为 什么 Vuejs 2.0 开始 引入 了 虚拟 DOM? 

你 是 否 好 奇 ， 为 什么 Vue.js 引入 虚拟 DOM 后 泻 染 速 度 就 变 快 了 ? 

又 或 者 ， 你 根本 没 听 说 过 虚拟 DOM， 那 么 什么 是 虚拟 DOM? 

这 一 切 的 问题 ， 都 将 在 本 篇 揭晓 。 


虚拟 DOM 简介 


到 今天 为 止 , 虚拟 DOM 其 实 已 不 再 是 一 个 新 东西 , 我 相信 很 多 人 已 经 或 多 或 少 都 听 说 过 它 。 
但 是 关于 虚拟 DOM， 大 部 分 人 的 理解 都 不 够 深入 。 我 在 网 上 看 过 很 多 关于 虚拟 DOM 的 文章 ， 
发 现 有 相当 一 部 分 文章 都 是 很 浅显 的 。 我 也 看 过 一 些 关于 Vuejs 的 书 ,让 我 感到 惊讶 的 是 , 某 些 
Vuejs 的 书 里 面 关于 虚拟 DOM 的 讲解 也 都 很 浅显 、 很 表面 ， 是 很 多 人 都 在 说 的 内 容 ， 而 关于 虚 
拟 DOM 的 本 质 ， 的 确 并 未 提 及 。 本 章 中 ， 我 会 详细 介绍 什么 是 虚拟 DOM。 


5.1 什么 是 虚拟 DOM 

虚拟 DOM 是 随 着 时 代 发 展 而 诞生 的 产物 。 

在 Web 早期 ， 页 面 的 交互 效果 比 现在 简单 得 多 ， 没 有 很 复杂 的 状态 需要 管理 ， 也 不 太 需 要 
频繁 地 操作 DOM， 使 用 jQuery 来 开发 就 可 以 满足 我 们 的 需求 。 

随 着 时 代 的 发 展 ， 页 面 上 的 功能 越 来 越 多 , 我 们 需要 实现 的 需求 也 越 来 越 复 杂 ， 程序 中 需要 
维护 的 状态 也 越 来 越 多 ，DOM 操作 也 越 来 越 频繁 。 

当 状 态 变 得 越 来 越 多 ，DOM 操作 越 来 越 频繁 时 ， 我 们 就 会 发 现 如 果 像 之 前 那样 使 用 jQuery 
来 开发 页 面 ， 那 么 代码 中 会 有 相当 多 的 代码 是 在 操作 DOM， 程 序 中 的 状态 也 很 难 管理 ， 代 码 中 
的 逻辑 也 很 混乱 。 

这 其 实 是 命令 式 操作 DOM 的 问题 ， 虽 然 简单 易 用 ， 但 是 在 业务 越 来 越 复 杂 的 今天 ， 它 会 有 
不 好 维护 的 问题 。 

现在 ， 我 们 使 用 的 三 大 主流 框架 Vue.js、Angular 和 React 都 是 声明 式 操作 DOM。 我 们 通过 
描述 状态 和 DOM 之 间 的 映射 关系 是 怎样 的 ， 就 可 以 将 状态 泻 染 成 视图 。 关 于 状态 到 视图 的 转换 
过 程 ， 框 架 会 帮 有 我 们 做 ， 不 需要 我 们 自己 手动 去 操作 DOM。 


说 明 事实 上 ， 任 何 应 用 都 有 状态 ， 并 不 是 只 有 使 用 了 现代 比较 流行 的 框架 之 后 才 有 状态 。 只 
不 过 现代 框架 揭露 了 一 个 事实 ， 那 就 是 我 们 的 关注 点 应 该 聚焦 在 状态 维护 上 ， 而 DOM 
操作 其 实 是 可 以 省 略 掉 的 ， 所 以 才 会 给 我 们 营造 一 种 错觉 ， 好 像 只 有 使 用 了 框架 之 后 的 
应 用 才 会 有 状态 。 
使 用 jQuery 开发 的 应 用 也 是 有 状态 的 ， 应 用 中 所 使 用 的 变量 都 是 状态 。 
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状态 可 以 是 JavaScript 中 的 任意 类 型 。0bject、Array、String、Number、Boolean 等 都 可 
以 作为 状态 , 这些 状 态 可 能 最 终 会 以 段落 、 表 单 、 链 接 或 按钮 等 元 素 呈 现在 用 户 界 面 上 ,具体 地 
说 是 呈现 在 页 面 上 。 

本 质 上 ， 我 们 将 状态 作为 输入 ， 并 生成 DOM 输出 到 页 面 上 显示 出 来 ， 这 个 过 程 叫 作 泻 染 ， 
如 图 5-1 所 示 。 


-> 


图 5-1 演 染 的 过 程 


然而 通常 程序 在 运行 时 ,状态 会 不 断 发 生变 化 (引起 状态 变化 的 原因 有 很 多 ， 有 可 能 是 用 户 
点 击 了 某 个 按钮 ， 也 可 能 是 某 个 Ajax 请 求 ， 这 些 行为 都 是 异步 发 生 的 。 理 论 上 ， 所 有 异步 行为 
都 有 可 能 引起 状态 变化 )。 每 当 状 态 发 生变 化 时 ， 都 需要 重新 演 染 。 如 何 确 定 状态 中 发 生 了 什么 
变化 以 及 需要 在 哪里 更 新 DOM? 

在 这 种 情况 下 ,最 简单 粗暴 的 解决 方式 是 ， 既 不 需要 关心 状态 发 生 了 什么 变化 ,也 不 需要 关 
心 在 哪里 更 新 DOM, 我 们 只 需要 把 所 有 DOM 全 删 了 ,然后 使 用 状态 重新 生成 一 份 DOM， 并 将 
其 输出 到 页 面 上 显示 出 来 就 好 了 。 

但 是 访问 DOM 是 非常 昂贵 的 。 按 照 上 面 说 的 方式 做 ， 会 造成 相当 多 的 性 能 浪费 。 状 态 变 化 
通常 只 有 有 限 的 几 个 节点 需要 重新 泻 染 , 所 以 我 们 不 仅 需 要 找 出 哪里 需要 更 新 , 还 需要 尽 可 能 少 
地 访问 DOM。 

如 图 5-2 所 示 ， 当 某 个 状态 发 生变 化 时 ， 只 更 新 与 这 个 状态 相关 联 的 DOM 节点 。 

这 个 问题 有 很 多 种 解决 方案 。 目 前 ， 各 大 主流 框架 都 有 自己 的 一 套 解决 方案 ， 在 Angular 中 
就 是 脏 检 查 的 流程 ，React 中 使 用 虚拟 DOM，Vue.js 1.0 通过 细 粒 度 的 绑 定 。 因 此 ,虚拟 DOM 本 
质 上 只 是 众多 解决 方案 中 的 一 种 ， 可 以 用 但 并 不 一 定 必须 用 。 

虚拟 DOM 的 解决 方式 是 通过 状态 生成 一 个 虚拟 节点 树 ， 然 后 使 用 虚拟 节点 树 进行 演 染 。 
在 演 染 之 前 ， 会 使 用 新 生成 的 虚拟 节点 树 和 上 一 次 生成 的 虚拟 节点 树 进行 对 比 ， 只 演 染 不 同 的 
部 分 。 
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状态 发 生变 化 
图 5-2 ”状态 发 生变 化 时 重新 泻 染 
虚拟 节点 树 其 实 是 由 组 件 树 建立 起 来 的 整个 虚拟 节点 ( Virtual Node， 也 经 常 简写 为 vnode ) 树 。 
图 5-3 给 出 了 一 颗 虚 拟 节点 树 的 样子 。 


图 5-3 虚拟 节点 树 
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5.2 为 什么 要 引入 虚拟 DOM 


事实 上 ，Angular 和 React 的 变化 侦 测 有 一 个 共同 点 ， 那 就 是 它们 都 不 知道 哪些 状态 ( state ) 
变 了 。 因 此 ， 就 需要 进行 比较 暴力 的 比 对 ，React 是 通过 虚拟 DOM 的 比 对 ，Angular 是 使 用 脏 检 
查 的 流程 。 

Vue.js 的 变化 侦 测 和 它们 都 不 一 样 ， 它 在 一 定 程 度 上 知道 具体 哪些 状态 发 生 了 变化 ， 这 样 就 
可 以 通过 更 细 粒 度 的 绑 定 来 更 新 视图 。 也 就 是 说 , 在 Vue.js 中 ， 当 状态 发 生变 化 时 ， 它 在 一 定 程 
度 上 知道 哪些 节点 使 用 了 这 个 状态 ， 从 而 对 这 些 节点 进行 更 新 操作 ， 根 本 不 需要 比 对 。 事 实 上 ， 
在 Vue.js 1.0 的 时 候 就 是 这 样 实现 的 。 


但 是 这 样 做 其 实 也 有 一 定 的 代价 。 因 为 粒度 太 细 ， 每 一 个 绑 定 都 会 有 一 个 对 应 的 watcher 
来 观察 状态 的 变化 , 这 样 就 会 有 一 些 内 存 开销 以 及 一 些 依赖 追踪 的 开销 。 当 状态 被 越 多 的 节点 使 
用 时 ， 开 销 就 越 大 。 对 于 一 个 大 型 项 目 来 说 ， 这 个 开销 是 非常 大 的 。 


因此 ，Vuejs 2.0 开始 选择 了 一 个 中 等 粒度 的 解决 方案 ， 那 就 是 引入 了 虚拟 DOM。 组 件 级 别 
是 一 个 watcher 实例 ， 就 是 说 即便 一 个 组 件 内 有 10 个 节点 使 用 了 某 个 状态 ,但 其 实 也 只 有 一 个 
watcher 在 观察 这 个 状态 的 变化 。 所 以 当 这 个 状态 发 生变 化 时 ， 只 能 通知 到 组 件 , 然后 组 件 内 部 
通过 虚拟 DOM 去 进行 比 对 与 泻 染 。 这 是 一 个 比较 折 中 的 方案 


Vue.js 之 所 以 能 随意 调整 绑 定 的 粒度 ， 本 质 上 还 要 归功 于 变化 侦 测 。 关 于 Vuejs 的 变化 侦 测 
原理 ， 我 们 在 第 3 章 中 已 经 详细 介绍 过 


5.3 Vue.js 中 的 虚拟 DOM 


在 Vuejs 中 ， 我 们 使 用 模板 来 描述 状态 与 DOM 之 间 的 映射 关系 。Vue.js 通过 编译 将 模板 转 
换 成 演 染 函数 (render ), 执行 演 染 函数 就 可 以 得 到 一 个 虚拟 节点 树 , 使 用 这 个 虚拟 节点 树 就 可 以 
泻 染 页 面 ， 具 体 如 图 5-4 所 示 。 


i 


可 + 国 = 加 = 回 


是 


图 5-4 ”模板 转换 成 视图 的 过 程 
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虚拟 DOM 的 终极 目标 是 将 虚拟 节点 (vnode ) 泻 染 到 视图 上 。 但 是 如 果 直 接 使 用 虚拟 节点 
履 盖 旧 节点 的 话 ， 会 有 很 多 不 必要 的 DOM 操作 。 

例如 ， 一 个 ul 标签 下 有 很 多 1i 标签 ， 其 中 只 有 一 个 1i 有 变化 ， 这 种 情况 下 如 果 使 用 新 的 
ul 去 替换 旧 的 ul ， 其 实 除了 那个 发 生 了 变化 的 1i 节点 之 外 ， 其 他 节点 都 不 需要 重新 演 染 。 

由 于 DOM 操作 比较 慢 ， 所 以 这 些 DOM 操作 在 性 能 上 会 有 一 定 的 浪费 ， 避 免 这 些 不 必要 的 
DOM 操作 会 提升 很 大 一 部 分 性 能 。 

为 了 避免 不 必要 的 DOM 操作 ， 虚 拟 DOM 在 虚拟 节点 映射 到 视图 的 过 程 中 ， 将 虚拟 节点 与 
上 一 次 泻 染 视 图 所 使 用 的 旧 虚 拟 节点 (oldVnode ) 做 对 比 , 找 出 真正 需要 更 新 的 节点 来 进行 DOM 
操作 ， 从 而 避免 操作 其 他 无 任何 改动 的 DOM。 


图 5-5 给 出 了 虚拟 DOM 的 整体 运行 流程 , 先 将 vnode 与 oldVnode 做 比 对 , 然后 再 更 新 视图 。 
虚拟 DOM 
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图 5-5 虚拟 DOM 的 执行 流程 


可 以 看 出 ， 虚 拟 DOM 在 Vue.js 中 所 做 的 事情 其 实 并 没有 想象 中 那么 复杂 ， 它 主要 做 了 两 
件 事 。 
口 提供 与 真实 DOM 节点 所 对 应 的 虚拟 节点 vnode。 
口 将 虚拟 节点 vnode 和 旧 虚 拟 节 点 oldVnode 进行 比 对 ， 然 后 更 新 视图 。 

vnode 是 JavaScript 中 一 个 很 普通 的 对 象 , 这 个 对 象 的 属性 上 保存 了 生成 DOM 节点 所 需要 的 
一 些 数据 ， 我 们 在 下 一 章 中 会 对 vnode 进行 详细 的 介绍 。 

对 两 个 虚拟 节点 进行 比 对 是 虚拟 DOM 中 最 核心 的 算法 ( 即 patch )， 它 可 以 判断 出 哪些 节 
点 发 生 了 变化 ， 从 而 只 对 发 后 了 变化 的 节点 进行 更 新 操作 。 关 于 patch ， 我 们 会 在 第 7 章 中 详 


细 介 绍 。 


5.4 总 结 


心口 


虚拟 DOM 是 将 状态 映射 成 视图 的 众多 解决 方案 中 的 一 种 , 它 的 运作 原理 是 使 用 状态 生成 虚 


拟 节 点 ， 然 后 使 用 虚拟 节点 泻 染 视图 。 


之 所 以 需要 先 使 用 状态 生成 虚拟 节点 ， 是 因为 如 果 直 接 用 状态 生成 真实 DOM， 会 有 一 定 程 


度 的 性 能 浪费 。 而 先 创建 虚拟 节点 再 泻 染 视图 ,就 可 以 将 虚拟 节点 缓存 ， 然 后 使 用 新 色 


| 建 的 虚拟 


节点 和 上 一 次 浑 染 时 缓存 的 虚拟 节点 进行 对 比 ， 然 后 根据 对 比 结果 只 更 新 需要 更 新 的 真实 DOM 


节点 ， 从 而 避免 不 必要 的 DOM 操作 ， 节 省 一 定 的 性 能 开销 。 


由 于 Vuejs 的 变化 侦 测 粒度 更 细 ， 所 以 当 状 态 发 生变 化 时 ，Vuejs 知道 的 信息 更 多 ， 一 定 程 


度 上 可 以 知道 哪些 位 置 使 用 了 状态 。 因 此 ，Vuejs 可 以 通过 细 粒 度 的 绑 定 来 更 新 视图 ， 
就 是 这 样 实现 的 。 


Vue.js 1.0 


但 是 这 样 做 也 有 一 定 的 代价 。 因 为 粒度 太 细 , 就 会 有 很 多 watcher 同时 观察 某 些 状态 , 会 有 
一 些 内 存 开销 以 及 一 些 依赖 追踪 的 开销 ， 所 以 Vue.js 2.0 采 取 了 一 个 中 等 粒度 的 解决 方案 ， 状 态 


侦 测 不 再 细 化 到 某 个 具体 节点 ， 而 是 某 个 组 件 ， 组 件 内 部 通过 虚拟 DOM 来 演 染 视图 ， 
大 缩减 依赖 数量 和 watcher 数量 。 


这 可 以 大 


Vuejs 中 通过 模板 来 描述 状态 与 视图 之 间 的 映射 关系 ， 所 以 它 会 先 将 模板 编译 成 泻 染 函数 ， 


然后 执行 泻 染 函数 生成 虚拟 节点 ， 最 后 使 用 虚拟 节点 更 新 视图 。 


因此 ,虚拟 DOM 在 Vuejs 中 所 做 的 事 是 提供 虚拟 节点 vnode 和 对 新 旧 两 个 vnode 进行 比 对 ， 


并 根据 比 对 结果 进行 DOM 操作 来 更 新 视图 。 


在 虚拟 DOM 中 ,VNode 是 比较 重要 的 知识 点 。 本章 中 , 我们 将 详细 介绍 什么 是 VNode , VNode 
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< 又 


和 草 


VNode 


的 作用 ， 以 及 不 同类 型 的 VNode 之 间 有 什么 区 别 。 


6.1 


什么 是 VNode 
在 Vue.js 中 存在 一 个 VNode 类 ， 使 用 它 可 以 实例 化 不 同类 型 的 vnode 实例 ， 而 不 同类 型 的 


vnode 实例 各 自 表 示 不 同类 型 的 DOM 元 素 。 


例如 ，DOM 元 素 有 元 素 节 点 、 文 本 节点 和 注释 节点 等 ，vnode 实例 也 会 对 应 着 有 元 素 节 点 、 


文本 节点 和 注释 节点 等 。 
VNode 类 的 代码 如 下 : 
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export default class VNode { 


constructor (tag, data, children, text, elm, context, componentOptions, asyncFactory) { 
this. 
this. 
this . 
this . 
this . 
this . 
this . 
this . 
this . 


this 


this . 
this . 


this 


this . 
this . 
this . 
this . 
this . 
this . 
this . 
.asyncFactory = asyncFactory 
this . 


this 


this 


tag = tag 

data = data 
children = children 
text = text 

elm = elm 

ns = undefined 
context = context 


raw = false 
isStatic = false 
isRootInsert = true 
isComment = false 
isCloned = false 
isonce = false 


functionalContext = undefined 
functionalOptions = undefined 
.functionalScopeId = undefined 

key = data && data.key 
componentOptions = componentOptions 
.componentInstance = undefined 
parent = undefined 


asyncMeta = undefined 


.isAsyncPlaceholder = false 
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26 } 

27 

28 get child () { 

29 return this.componentInstance 
36 } 

31 } 


从 上 面 的 代码 可 以 看 出 ，vnode 只 是 一 个 名 字 , 本 质 上 其 实 是 JavaScript 中 一 个 普通 的 对 象 ， 
是 从 VNode 类 实例 化 的 对 象 。 我 们 用 这 个 JavaScript 对 象 来 描述 一 个 真实 DOM 元 素 的 话 ， 那 么 
该 DOM 元 素 上 的 所 有 属性 在 VNode 这 个 对 象 上 都 存在 对 应 的 属性 。 


简单 地 说 ，vnode 可 以 理解 成 节点 描述 对 象 ， 它 描述 了 应 该 怎样 去 创建 真实 的 DOM 节点 。 

例如 , tag 表示 一 个 元 素 节点 的 名 称 , text 表示 一 个 文本 节点 的 文本 , children 表示 子 节 点 等 。 

vnode 表示 一 个 真实 的 DOM 元 素 , 所 有 真实 的 DOM 节 点 都 使 用 vnode 创建 并 插 人 到 页 面 中 ， 
如 图 6-1 所 示 。 


图 6-1 VNode 创建 DOM 并 插入 到 视图 
图 6-1 展示 了 使 用 vnode 创建 真实 DOM 并 泻 染 到 视图 的 过 程 。 可 以 得 知 , vnode 和 视图 是 一 
一 对 应 的 。 我 们 可 以 把 vnode 理解 成 JavaScript 对 象 版 本 的 DOM 元 素 。 


从 图 6-1 还 可 以 得 知 , 泻 染 视图 的 过 程 是 先 创建 vnode, 然 后 再 使 用 vnode 去 生成 真实 的 DOM 
元 素 ， 最 后 搬入 到 页 面 渔 染 视图 。 


6.2 VNode 的 作用 


由 于 每 次 泻 染 视图 时 都 是 先 创 建 vnode， 然 后 使 用 它 创 建 真实 DOM 插入 到 页 面 中 ， 所 以 可 
以 将 上 一 次 演 染 视图 时 所 创建 的 vnode 缓存 起 来 ， 之 后 每 当 需 要 重新 演 染 视图 时 ， 将 新 创建 的 
vnode 和 上 一 次 缓存 的 vnode 进行 对 比 ， 查 看 它们 之 间 有 哪些 不 一 样 的 地 方 ， 找 出 这 些 不 一 样 的 
地 方 并 基于 此 去 修改 真实 的 DOM。 

Vue.js 目前 对 状态 的 侦 测 策略 采用 了 中 等 粒度 。 当 状态 发 生变 化 时 ， 只 通知 到 组 件 级 别 ， 然 
后 组 件 内 使 用 虚拟 DOM 来 泻 染 视图 。 

如 图 6-2 所 示 ， 当 某 个 状态 发 生 改变 时 ， 只 通知 使 用 了 这 个 状态 的 组 件 (图 6-2 通知 了 第 二 
个 组 件 )。 


也 就 是 说 ， 只 要 组 件 使 用 的 众多 状态 中 有 一 个 发 生 了 变化 ， 那 么 整个 组 件 就 要 重新 泻 染 。 


56 第 6 章 VNode 
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图 6-2 ”变化 侦 测 只 通知 到 组 件 级 别 


如 果 组 件 只 有 一 个 节点 发 生 了 变化 , 那么 重新 泻 染 整 个 组 件 的 所 有 节点 , 很 明显 会 造成 很 大 
的 性 能 浪费 。 因 此 ， 对 vnode 进行 缓存 ， 并 将 上 一 次 缓存 的 vnode 和 当前 新 创建 的 vnode 进行 对 
比 ， 只 更 新 发 生变 化 的 节点 就 变 得 尤为 重要 。 这 也 是 vnode 最 重要 的 一 个 作用 。 


6.3 VNode 的 类 型 


vnode 有 很 多 种 不 同 的 类 型 ， 接 下 来 我 们 介绍 不 同类 型 之 间 有 什么 区 别 。 
vnode 的 类 型 有 以 下 几 种 : 

口 注释 节点 

口 文本 节点 

口 元 素 节 点 

口 组 件 节点 

口 函数 式 组 件 

口 克隆 节点 


前 面 我 们 介绍 了 什么 是 vnode， 知 道 vnode 是 JavaScript 中 的 一 个 对 象 ， 不 同类 型 的 vnode 
之 间 其 实 只 是 属性 不 同 , 准确 地 说 是 有 效 属 性 不 同 。 因 为 当 使 用 VNode 类 创建 一 个 vnode 时 , 通 
过 参数 为 实例 设置 属性 时 , 无 效 的 属性 会 默认 被 赋值 为 undefined 或 false。 对 于 vnode 身上 的 
无 效 属性 ， 直 接 忽 略 就 好 。 接 下 来 ,我们 详细 讨论 这 些 类 型 的 vnode 都 有 哪些 有 效 属性 。 
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6.3.1 注释 节点 
由 于 创建 注释 节点 的 过 程 非常 简单 ， 所 以 直接 通过 代码 来 介绍 它 有 哪些 属 ; 


61 export const createEmptyVNode = text => { 


号 
I 


62 const node = new VNode() 
03 node.text = text 

04 node.isComment = true 
85 return node 

66 } 


可 以 看 出 ， 一 个 注释 节点 只 有 两 个 有 效 属性 
undefined 或 者 false。 


text 和 isComment， 其 余 属 性 全 是 默认 的 


例如 ， 一 个 真实 的 注释 节点 : 

61 <1-- 注释 节点 --> 6 
所 对 应 的 vnode 是 下 面 的 样子 : 

61 { 

62 text: "注释 节点 "， 

03 isComment: true 

64 } 


6.3.2 文本 节点 
文本 节点 的 创建 过 程 也 非常 简单 ， 我 们 也 可 以 直接 通过 代码 来 了 解 它 有 哪些 有 效 属性 : 


681 export function createTextVNode (val) { 


型 


02 return new VNode(undefined, undefined, undefined, String(val)) 
63 } 
通过 上 面 的 代码 可 以 了 解 到 ， 当 文本 类 型 的 vnode 被 创建 时 ， 它 只 有 一 个 text 属性 : 
61 { 
62 text: "Hello Berwin" 
63 } 
上 面 代码 所 展示 的 对 象 就 是 文本 类 型 的 vnode。 
6.3.3 ”克隆 节 


克隆 节点 是 将 现 有 节点 的 属性 复制 到 新 节点 中 , 让 新 创建 的 节点 和 被 克隆 节点 的 属性 保持 一 
致 ， 从 而 实现 克隆 效果 。 它 的 作用 是 优化 静态 节点 和 捅 模 节 点 〈slot node )。 

以 静态 节点 为 例 ， 当 组 件 内 的 某 个 状态 发 生变 化 后 ， 当 前 组 件 会 通过 虚拟 DOM 重新 泻 染 视 
， 静 态 节 点 因为 它 的 内 容 不 会 改变 ， 所 以 除了 首次 泻 染 需 要 执行 泻 染 也 数 获取 vnode 之 外 , 后 
i ek ne vnode。 因 此 ， 这 时 就 会 使 用 创建 克隆 节点 的 方法 将 vnode 
克隆 一 份 , 使 用 克隆 节点 进行 演 染 。 这 样 就 不 需要 重新 执行 演 染 函数 生成 新 的 静态 节点 的 vnode， 
从 而 提升 一 定 程 度 的 性 能 。 
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由 于 创建 克隆 节点 的 过 程 不 复杂 ， 所 以 还 
861 export function cloneVNode (vnode，deep) { 
02 const cloned = new VNode( 
03 vnode.tag, 
04 vnode.data, 
@5 vnode.children, 
66 vnode. text, 
97 vnode.elm, 
98 vnode.context, 
69 vnode.componentOptions, 


16 vnode.asyncFactory 

11 ) 

12 cloned.ns = vnode.ns 

13 cloned.isStatic = vnode.isStatic 
14 cloned.key = vnode.key 

15 cloned.isComment = vnode.isComment 
16 cloned.isCloned = true 

17 if (deep && vnode.children) { 

18 cloned.children = cloneVNodes(vnode.children) 
19 } 

20 return cloned 

21 } 


可 以 看 出 ， 克 隆 现 有 节点 时 ， 只 需要 将 现 有 节点 的 


克隆 节点 和 被 克隆 节 


被 克隆 的 原始 节点 


点 的 isCloned 为 false。 


6.3.4 元素 节点 


元 素 节 点 通常 


口 tag: 顾 名 
口 data: 


口 context : 


例如 ， 一 


61 <p><span 


该 属性 包含 了 一 些 
DD children: 


会 存在 以 下 4 种 有 效 属 
思 义 ，tag 就 是 一 个 节点 的 名 称 ， 


当前 节点 的 子 节点 列表 。 
它 是 当前 组 件 的 Vue,js 实例 。 


个 真实 的 元 素 节 点 : 


>Hello</span><span>Berwin</span></p> 


所 对 应 的 vnode 是 下 面 的 样子 : 


el { 
62 childr 


en: [VNode, VNode], 


03 context: {...}, 


04 data: 
65 tag: " 
66 oo 
67 } 


Eo 


pP ， 


点 之 间 的 唯一 区 别 是 isCloned 


不 是 直接 通过 代码 来 了 解 : 


属性 全 部 复制 到 新 节点 中 即 可 。 
属性 ， 克 隆 节 点 的 isCloned 为 true， 


例如 p、ul、1i 和 div 等 。 
节点 上 的 数据 ， 比 如 attrs、class 和 style 等 。 


6.3.5 组 件 节点 
组 件 节点 和 元 素 节点 类 似 ， 有 以 下 两 个 独 有 的 属性 。 


和 children 等 信息 。 


都 是 一 个 Vue.js 实例 。 


一 个 组 件 节 点 : 
el <child></child> 


所 对 应 的 vnode 是 下 面 的 样子 : 


61 { 

62 componentInstance: {...}, 

0@3 componentOptions: {...}, 

84 context: {...}, 

685 data: {...} 

86 tag: "vue-component-1-child", 
O07 

68 } 


6.3.6 ”函数 式 组 件 


口 componentoptions : 顾名思义 ， 就 是 组 件 节点 的 选项 参数 ， 其 中 包含 propsData、tag 


口 componentInstance: 组 件 的 实例 ， 也 是 Vue.js 的 实例 。 事实 上 ,在 Vue.js 中 ,每 个 组 件 


函数 式 组 件 和 组 件 节点 类 似 ， 它 有 两 个 独 有 的 属性 functionalCcontext 和 functional- 


Options。 
通常 ， 一 个 函数 式 组 件 的 vnode 是 下 面 的 样子 : 
el { 
02 functionalContext: {...}, 
83 functionalOptions: {...}, 
84 context: {...}, 
85 data: {...} 
86 tag: "div" 
67 } 


6.4 总 结 


VNode 是 一 个 类 ， 可 以 生成 不 同类 型 的 vnode 实例 ， 
实 DOM 元 素 。 


而 不 同类 型 的 vnode 表示 不 同类 型 的 真 


由 于 Vuejs 对 组 件 采 用 了 虚拟 DOM 来 更 新 视图 ， 当 


属性 发 生变 化 时 ， 整 个 组 件 都 要 进行 重新 


泻 染 的 操作 ， 但 组 件 内 并 不 是 所 有 DOM 节点 都 需要 更 新 ， 所 以 将 vnode 缓存 并 将 当前 新 生成 的 


vnode 和 上 一 次 缓存 的 oldVnode 进行 对 比 , 只 对 需要 更 新 的 部 分 进行 DOM 操作 可 以 提升 很 多 性 能 。 
vnode 有 多 种 类 型 , 它们 本 质 上 都 是 从 VNode 类 实例 化 出 的 对 象 , 其 唯一 区 别 只 是 属性 不 同 。 


patch 


虚拟 DOM 最 核心 的 部 分 是 patch， 它 可 以 将 vnode 泻 染 成 真实 的 DOM。 

patch 也 可 以 叫 作 patching 算法 ， 通 过 它 泻 染 真实 DOM 时 ， 并 不 是 暴力 覆盖 原 有 DOM， 而 
是 比 对 新 旧 两 个 vnode 之 间 有 哪些 不 同 , 然后 根据 对 比 结果 找 出 需要 更 新 的 节点 进行 更 新 。 这 一 
点 从 名 字 就 可 以 看 出 ,patch 本 身 就 有 补丁 、 修 补 等 意思 , 其 实际 作用 是 在 现 有 DOM 上 进行 修改 
来 实现 更 新 视图 的 目的 。 

之 所 以 要 这 么 做 , 主要 是 因为 DOM 操作 的 执行 速度 远 不 如 JavaScript 的 运算 速度 快 。 因 此， 
把 大 量 的 DOM 操作 搬运 到 JavaScript 中 ,使 用 patching 算法 来 计算 出 真正 需要 更 新 的 节点 ， 最 
大 限度 地 减少 DOM 操作 ， 从 而 显著 提升 性 能 。 这 本 质 上 其 实 是 使 用 JavaScript 的 运算 成 本 来 替 
换 DOM 操作 的 执行 成 本 ， 而 JavaScript 的 运算 速度 要 比 DOM 快 很 多 ， 这 样 做 很 划算 ， 所 以 才 
会 有 虚拟 DOM。 
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对 比 两 个 vnode 之 间 的 差异 只 是 patch 的 一 部 分 ， 这 是 手段 ， 而 不 是 目的 。patch 的 目的 其 实 
是 修改 DOM 节点 ， 也 可 以 理解 为 泻 染 视图 。 上 面 说 过 ，patch 不 是 暴力 替换 节点 ， 而 是 在 现 有 
DOM 上 进行 修改 来 达到 演 染 视图 的 目的 。 对 现 有 DOM 进行 修改 需要 做 三 件 事 : 
口 创建 新 增 的 节点 ; 

口 删除 已 经 废弃 的 节点 ; 
口 修改 需要 更 新 的 节点 。 

我 们 知道 patch 的 过 程 其 实 就 是 创建 节点 、 删 除 节 点 和 修改 节点 的 过 程 ， 接 下 来 主要 讨论 在 
什么 情况 下 创建 新 节点 , 插入 到 什么 位 置 ; 在 什么 情况 下 删除 节点 ,删除 哪个 节点 ; 在 什么 情况 
下 修改 节点 ， 修 改 哪个 节点 等 。 

在 详细 讨论 什么 情况 下 需要 对 节点 进行 更 改 之 前 ， 我 们 需要 先 弄 清楚 一 个 问题 。 
事实 上 , 我 一 再 强调 : 之 所 以 需要 通过 算法 来 比 对 两 个 节点 之 间 的 差异 ， 并 针对 不 同 的 节点 
进行 更 新 ， 主 要 是 为 了 性 能 考虑 。 

我 们 完全 可 以 把 整个 旧 节 点 从 DOM 中 删除 ， 然 后 使 用 最 新 的 状态 ( state ) 重新 生成 一 份 全 
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新 的 节点 并 插入 到 DOM 中 ， 这 种 方式 完全 可 以 实现 功能 。 


由 于 我 们 的 最 终 目 的 是 演 染 视图 ， 所 以 可 以 发 现 演 染 视图 的 标准 是 以 vnode (使 用 最 新 状态 
创建 的 vnode ) 来 演 染 而 不 是 oldVnode (上 一 次 演 染 DOM 所 创建 的 vnode )。 


也 就 是 说 ， 当 oldVnode 和 vnode 不 一 样 的 时 候 ， 以 vnode 为 准 来 泻 染 视 图 。 


7.1.1 新 增 节点 


本 节 中 , 我 们 主要 讨论 在 什么 情况 下 新 增 节 点 。 之 所 以 讨论 什么 情况 下 需要 新 增 节 点 , 本质 
上 是 为 了 使 用 JavaScript 的 计算 成 本 来 换取 DOM 的 操作 成 本 。 如 果 一 个 节点 已 经 存在 于 DOM 中 ， 
那 就 不 需要 重新 创建 一 个 同样 的 节点 去 替换 已 经 存在 的 节点 。 事 实 上 ， 只 有 那些 因为 状态 的 改变 
而 新 增 的 节点 在 DOM 中 并 不 存在 时 ， 我 们 才 需 要 创建 一 个 节点 并 插入 到 DOM 中 。 


首先 ， 新 增 节点 的 一 个 很 明显 的 场景 就 是 ， 当 oldVnode 不 存在 而 vnode 存在 时 ， 就 需要 使 
用 vnode 生成 真实 的 DOM 元 素 并 将 其 插 和 人 到 视图 当中 去 。 


这 通常 会 发 生 在 首次 浑 染 中 。 因 为 首次 泻 染 时 ，DOM 中 不 存在 任何 节点 ,所 以 oldVnode 是 
不 存在 的 。 


图 7-1 给 出 了 当 oldVnode 不 存在 时 ， 直 接 使 用 vnode 创建 元 素 并 泻 染 视图 。 


图 7-1 使 用 vnode 创建 元 素 并 泻 染 视图 

7-2 给 出 了 首次 泻 染 视图 时 ( 页 面 中 没有 任何 节点 ,oldVnode 并 不 存在 ), 只 需要 使 用 vnode 
即 可 。 

除了 上 面 介 绍 的 情况 需要 新 增 节 点 之 外 ， 还 有 一 种 情况 也 需要 新 增 节点 。 

当 vnode 和 oldVnode 完全 不 是 同一 个 节点 时 , 需要 使 用 vnode 生成 真实 的 DOM 元 素 并 将 其 
插入 到 视图 当中 。 


前 面 介绍 过 ， 当 oldVnode 和 vnode 不 一 样 的 时 候 ， 以 vnode 为 标准 来 泻 染 视图 。 因 此 ， 当 
vnode 和 oldVnode 完全 不 是 同一 个 节点 的 时 候 , 可 以 得 知 vnode 就 是 一 个 全 新 的 节点 ,而 oldVnode 
就 是 一 个 被 废弃 的 节点 。 


vnode 


不 存在 


oldVnode 
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页 面 


入 


图 7-2 ”首次 泻 染 视 图 时 ， 使 用 vnode 直接 泻 染 


这 种 情况 下 ,我 们 要 做 的 事情 就 是 使 用 vnode 创建 一 个 新 DOM 节点 , 用 它 去 替换 oldVnode 
所 对 应 的 真实 DOM 节点 ， 如 图 7-3 所 示 。 


i a edi et td ni pee, cies le ei jt 


1 
1 不 是 同一 1 节点 1 
1 
1 


vnode 


7-3 ”使 用 vnode 替换 oldVnode 


7.1.2 ”删除 节点 


删除 节点 的 场景 上 一 节 略 有 提 及 ， 就 是 当 一 个 节点 只 在 oldVnode 中 存在 时 ， 我 们 需要 把 它 
从 DOM 中 删除 。 因 为 泻 染 视图 时 ， 需 要 以 vnode 为 标准 ， 所 以 vnode 中 不 存在 的 节点 都 属于 被 
废弃 的 节点 ， 而 被 废弃 的 节点 需要 从 DOM 中 删除 。 

如 图 7-3 所 示 ， 当 oldVnode 和 vnode 完全 不 是 同一 个 节点 时 ,在 DOM 中 需要 使 用 vnode 创 
建 的 新 节点 替换 oldVnode 所 对 应 的 旧 节 点 ， 而 替换 过 程 是 将 新 创建 的 DOM 节点 插入 到 旧 节 点 
的 旁边 ， 然 后 再 将 旧 节 点 删除 ， 从 而 完成 替换 过 程 。 
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7.1.3 更 新 节点 


前 面 介绍 了 新 增 节 点 和 删除 节点 的 场景 , 我 们 发 现 它 们 之 间 有 一 个 共同 点 , 那 就 是 两 个 虚拟 
节点 是 完全 不 同 的。 由 于 我 们 需要 以 新 节点 为 标准 泻 染 视图 , 所 以 这 个 时 候 只 有 两 种 操作 可 以 执 
行 : 将 旧 节 点 删除 或 者 创建 新 增 节 点 。 

其 实 除了 前 面 介绍 的 场景 外 , 另 一 个 更 常见 的 场景 是 新 旧 两 个 节点 是 同一 个 节点 。 当 新 旧 两 
个 节点 是 相同 的 节点 时 ， 我 们 需要 对 这 两 个 节点 进行 比较 细致 的 比 对 ， 然 后 对 oldVnode 在 视图 
中 所 对 应 的 真实 节点 进行 更 新 。 

举 个 简单 的 例子 ， 当 新 旧 两 个 节点 是 同一 个 文本 节点 ,但 是 两 个 节点 的 文本 不 一 样 时 , 我们 
需要 重新 设置 oldVnode 在 视图 中 所 对 应 的 真实 DOM 节点 的 文本 。 


7-4 给 出 了 用 vnode 中 的 文字 替换 DOM 中 文字 的 过 程 。 视 图 中 的 文本 节点 所 包含 的 文字 
是 “我 是 文字 ”， 而 当 状态 发 生变 化 时 ， 将 文本 改 成 了 “我 是 文字 2”"， 这 时 使 用 改变 后 的 状态 生 
成 了 新 的 vnode，, 然后 将 vnode 与 oldVnode 进行 比 对 ,发 现 它 们 是 同一 个 节点 ， 再 将 这 两 个 节点 
进行 更 详细 的 比 对 ， 比 对 结果 是 文字 发 生 了 变化 ， 最 后 将 真实 DOM 节点 中 的 文本 改 成 了 vnode 
中 的 文字 “我 是 文字 2”。 


将 文本 改 成 “我 是 文字 2” 


图 7-4 使 用 vnode 中 的 文字 替换 真实 DOM 中 的 文字 


这 里 提 到 对 两 个 相同 节点 进行 更 详细 的 比 对 ， 这 个 比 对 过 程 会 在 7.4 节 中 详细 介绍 。 


7.1.4 小结 


通过 前 面 的 介绍 ， 可 以 发 现 整 个 patch 的 过 程 并 不 复杂 。 当 oldVnode 不 存在 时 ， 直 接 使 用 
vnode 演 染 视图 ; 当 oldVnode 和 vnode 都 存在 但 并 不 是 同一 个 节点 时 ， 使 用 vnode 创建 的 DOM 
元 素 替 换 旧 的 DOM 元 素 ; 当 oldVnode 和 vnode 是 同一 个 节点 时 , 使 用 更 详细 的 对 比 操作 对 真实 
的 DOM 节点 进行 更 新 。 
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7-5 给 出 了 patch 的 运行 流程 。 


oldVnode 
是 否 存 在 


存在 


oldvnode 和 vnode 
是 否 是 同一 个 
节点 


vnode 创 建 
节点 并 插入 视 区 


不 存在 


使 用 

patchvnode 
进行 更 详细 的 对 
比 与 更 新 操作 


冯 


图 7-5 patch 运行 流程 


7.2 创建 节点 


在 7.1.1 节 中 ， 我 们 介绍 了 在 什么 情况 下 创建 元 素 并 将 元 素 渔 染 到 视图 。 本 节 中 ,我 们 将 详 


细 介 绍 一 个 元 素 从 创建 到 泻 染 的 过 程 。 
通过 前 面 的 学 习 ， 我 们 知道 


需要 通过 vnode 来 创建 一 个 真实 的 DOM 元 素 。 
建 DOM 元 素 时 , 最 重要 的 事 是 根据 vnode 的 类 


元 素 插 入 到 视图 中 。 


ee DOM 元 素 所 需 的 信息 都 保存 在 vnode 中 ， 我 们 


第 6 章 又 介绍 了 vnode 是 有 类 型 的 ， 所 以 在 创 


相同 类 


型 的 DOM 元 素 , 然后 将 DOM 
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事实 上 , 只 有 三 种 类 型 的 节点 会 被 创建 并 插入 到 DOM 中 : 元 素 节点 、 注 释 节 点 和 文本 节点 。 

而 要 判断 vnode 是 和 否 是 元 素 节点 ， 只 需要 判断 它 是 否 具 有 tag 属性 即 可 。 如 果 一 个 vnode 具 
有 tag 属性 ， 就 认为 它 是 元 素 属 性 。 接 着 ， 我 们 就 可 以 调用 当前 环境 下 的 createElement 方法 
(在 浏览 器 环境 下 就 是 document .createElement ) 来 创建 真实 的 元 素 节 点 。 当 一 个 元 素 节 点 被 
创建 后 ， 接 下 来 要 做 的 事情 就 是 将 它 插入 到 指定 的 父 节 点 中 。 

将 元 素 泻 染 到 视图 的 过 程 非常 简单 。 只 需要 调用 当前 环境 下 的 appendchild 方法 (在 浏览 
器 环境 下 就 是 调用 parentNode.appendChild )， 就 可 以 将 一 个 元 素 插 入 到 指定 的 父 节点 中 。 如 果 
这 个 指定 的 父 节 点 已 经 被 泻 染 到 视图 ， 那 么 把 元 素 插 入 到 它 的 下 面 将 会 自动 将 元 素 泻 染 到 视图 。 

其 实 创建 元 素 节 点 还 缺 了 一 个 步 又， 我 们 刚刚 没有 说 。 元 素 节 点 通常 都 会 有 子 节 点 
( children )， 所 以 当 一 个 元 素 节点 被 创建 后 ， 我 们 需要 将 它 的 子 节 点 也 创建 出 来 并 搬入 到 这 个 刚 
创建 出 的 节点 下 面 。 

创建 子 节点 的 过 程 是 一 个 递归 过 程 。vnode 中 的 children 属性 保存 了 当前 节点 的 所 有 子 虚 
拟 节 点 (child virtual node ), 所 以 只 需要 将 vnode 中 的 children 属性 循环 一 遍 , 将 每 个 子 虚 拟 节 
点 都 执行 一 遍 创 建 元 素 的 逻辑 ， 就 可 以 实现 我 们 想 要 的 功能 。 
创建 子 节点 时 ， 子 节点 的 父 节 点 就 是 当前 刚 创建 出 来 的 这 个 节点 ， 所 以 子 节点 被 创建 后 ,会 
被 插入 到 当前 节点 的 下 面 。 当 所 有 子 节 点 都 创建 完 并 插入 到 当前 节点 中 之 后 , 我 们 把 当前 节点 搬 
人 到 指定 父 节 点 的 下 面 。 如果 这 个 指定 的 父 节 点 已 经 被 泻 染 到 视图 中 , 那么 将 当前 这 个 节点 插入 
进去 之 后 ， 会 将 当前 节点 ( 包括 其 子 节 点 ) 演 染 到 视图 中 。 

7-6 给 出 了 从 虚拟 DOM 创建 真实 DOM， 最 后 泻 染 到 视图 的 过 程 。 


虚拟 DOM 


图 7-6 使 用 虚拟 DOM 创建 真实 DOM 并 泻 染 到 视图 的 过 程 
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7-7 给 出 了 一 个 元 素 节 点 从 创建 到 泻 染 视图 的 过 程 。 


图 7-7 创建 元 素 节点 并 将 其 浑 染 到 视图 的 过 程 

除了 元 素 节点 外 ， 其 实 还 要 创建 注释 节点 和 文本 节点 。 

在 创建 节点 时 ， 如 果 vnode 中 不 存在 tag 属性 , 那么 它 可 能 会 是 另外 两 种 节点 : 注释 节点 和 
文本 节点 。 

在 第 6 章 中 介绍 VNode 时 , 我 们 介绍 过 注释 节点 有 一 个 唯一 的 标识 属性 ijscomment。 在 所 有 
类 型 的 vnode 中 ， 只 有 注释 节点 的 isComment 属性 是 true， 所 以 通过 isComment 属性 就 可 以 判 
汤 一 个 vnode 是 否 是 注释 节点 。 

当 发 现 一 个 vnode 的 tag 属性 不 存在 时 ， 我 们 可 以 用 iscomment 属性 来 判断 它 是 注释 节点 
还 是 文本 节点 。 如 果 是 文本 节点 ， 则 调用 当前 环境 下 的 createTextNode 方法 (浏览 需 环 境 下 调 
用 document.createTextNode ) 来 创建 真实 的 文本 节点 并 将 其 搬入 到 指定 的 父 节 点 中 ; 如 果 是 
注释 节点 ， 则 调用 当前 环境 下 的 createComment 方法 (浏览 器 环境 下 调用 document. 
createComment 方法 ) 来 创建 真实 的 注释 节点 并 将 其 插入 到 指定 的 父 节点 中 。 
图 7-8 给 出 了 创建 一 个 节点 并 将 其 演 染 到 视图 的 全 过 程 。 
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vnode 是 元 素 节 点 7 


是 一 一 创建 元 素 节 点 


vnodc 足 注释 节点 ? 评 一 | 创建 注释 节点 


桥 入 人 到 指定 父 节 点 中 


图 7-8 创建 节点 并 泻 染 到 视图 的 过 程 


7.3 ”删除 节点 

在 7.1.2 节 中 ， 我 们 介绍 了 在 什么 情况 下 需要 将 元 素 从 视图 中 删除 。 本 节 中 ， 我 们 将 详细 介 
绍 一 个 元 素 是 怎样 从 视图 中 删除 的 。 

删除 节点 的 过 程 非常 简单 。 在 Vuejs 源码 中 ， 删 除 元 素 的 代码 并 不 多 ， 其 实现 逻辑 如 下 ; 


61 function removeVnodes (vnodes，startIdx，endIdx) { 


82 for (; startIdx <= endIdx; ++startIdx) { 
83 const ch = vnodes[startIdx] 

84 if (isDef(ch)) { 

685 removeNode(ch.elm) 

06 } 

67 } 

68 } 


简单 来 说 , 上 面 代 码 实现 的 功能 是 删除 vnodes 数组 中 从 startIdx 指定 的 位 置 到 endIdx 指 
定位 置 的 内 容 。 
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removeNode 用 于 删除 视图 中 的 单个 节点 ， 而 removeVnodes 用 于 删除 一 组 指定 的 节点 。 


removeNode 的 实现 逻辑 如 下 : 
91 const nodeOps = { 


62 removeChild (node, child) { 

63 node.removeChild(child) 

64 } 

e5 } 

66 

67 function removeNode (el) { 

68 const parent = nodeOps.parentNode(el) 
69 if (isDef(parent)) { 

16 nodeOps.removeChild(parent, el) 
11 > 

12 } 


上 面 代 码 的 逻辑 是 将 当前 元 素 从 它 的 父 节 点 中 删除 ， 其 中 nodeops 是 对 节点 操作 的 封装 。 

有 同学 可 能 会 对 nodeOps 感到 奇怪 ， 为 什么 不 直接 使 用 parent .removeChild(child) 删 除 
节点 ， 而 是 将 这 个 节点 操作 封装 成 函数 放 在 nodeops 里 呢 ? 

其 实 这 涉及 跨 平 台 演 染 的 知识 ， 我们 知道 阿里 开发 的 Weex 可 以 让 我 们 使 用 相同 的 组 件 模型 
为 OS 和 Android 编 写 原生 演 染 的 应 用 ,也 就 是 说 ,我 们 写 的 Vue.js 组 件 可 以 分 别 在 iOS 和 Android 
环境 中 进行 原生 演 染 。 

而 跨 平 台 演 染 的 本 质 是 在 设计 框架 的 时 候 ， 要 让 框架 的 演 染 机 制 和 DOM 解 厢 。 只 要 把 框架 
更 新 DOM 时 的 节点 操作 进行 封装 ， 就 可 以 实现 跨 平台 演 染 ， 在 不 同 平台 下 调用 节点 的 操作 。 

换言之 , 如 果 我 们 把 这 些 平台 下 节点 操作 的 封装 看 成 泻 染 引 擎 , 那么 将 这 些 泻 染 引 警 所 提供 
的 节点 操作 的 API 和 框架 的 运行 时 对 接 一 下 ， 就 可 以 实现 将 框架 中 的 代码 进行 原生 泻 染 的 目的 。 

这 就 是 将 removeChild 方法 封装 到 nodeops 中 的 原因 。 更 多 关于 跨 平 台 演 染 的 内 容 已 超出 
本 章 的 讨论 范围 ， 这 里 不 再 展开 讨论 。 


7.4 更 新 节点 


在 7.1.3 节 中 ， 我 们 介绍 了 只 有 两 个 节点 是 同一 个 节点 时 ， 才 需要 更 新 元 素 节 点 ， 而 更 新 节 
点 并 不 是 很 暴力 地 使 用 新 节点 覆盖 旧 节 点 ,而 是 通过 比 对 找 出 新 旧 两 个 节点 不 一 样 的 地 方 , 针对 
那些 不 一 样 的 地 方 进行 更 新 。 本 广 中 ， 我 们 将 介绍 节点 更 新 的 详细 过 程 。 


7.4.1 静态 节点 


在 更 新 节点 时 ,首先 需要 判断 新 旧 两 个 虚拟 节点 是 否 是 静态 节点 ， 如 果 是 ， 就 不 需要 进行 更 
新 操作 ， 可 以 直接 跳 过 更 新 节点 的 过 程 。 


什么 是 静态 节点 ? 
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静态 节点 指 的 是 那些 一 旦 泻 染 到 界面 上 之 后 , 无 论 日 后 状态 如 何 变化 , 都 不 会 发 生 任何 变化 
的 节点 。 

例如 : 

61 《py> 我 是 静态 节点 ， 我 不 需要 发 生变 化 </p> 
上 面 这 个 HTML 就 是 一 个 静态 节点 ， 它 不 会 因为 状态 的 变化 而 发 生变 化 。 这 个 节点 一 旦 被 演 染 


到 视图 之 后 ， 当 应 用 在 运行 时 ,无 论 状 态 是 否 发 生变 化 ， 痢 不 会 影响 到 这 个 节点 , 这 个 节点 永远 
都 不 需要 重新 演 染 。 


了 解 了 静态 方 点 的 特点 之 后 , 就 不 难 理解 为 什么 需要 判断 虚拟 节点 是 否 是 静态 节点 , 从 而 跳 
过 更 新 节点 的 操作 过 程 了 。 


7.4.2 ”新 虚拟 节点 有 文本 属性 


当 新 旧 两 个 虚拟 节点 (vnode 和 oldVnode ) 不 是 静态 节点 ， 并且 有 不 同 的 属性 时 ， 要 以 新 虚 
拟 节 点 (vnode ) 为 准 来 更 新 视图 。 根 据 新 节点 ( vnode ) 是 否 有 text 属性 ， 更 新 节点 可 以 分 为 
两 种 不 同 的 情况 。 

如 果 新 生成 的 虚拟 节点 (vnode ) 有 text 属性 ， 那么 不 论 之 前 旧 节 点 的 子 节 点 是 什么 ， 直 接 
调用 setTextContent 方法 (在 浏览 器 环境 下 是 node.textContent 方法 ) 来 将 视图 中 DOM 市 
点 的 内 容 改 为 虚拟 节点 ( vnode ) 的 text 属性 所 保存 的 文字 。 

因为 更 新 是 以 新 创建 的 虚拟 节点 (vnode ) 为 准 的 ， 所 以 如 果 新 创建 的 虚拟 节点 有 文本 ， 那 
么 根本 就 不 需要 关心 之 前 旧 节 点 中 所 包含 的 内 容 是 什么 ,无 论 是 文本 还 是 元 素 节 点 , 这 都 不 重要 。 
唯一 需要 关心 的 是 ， 如 果 之 前 的 旧 节 点 也 是 文本 ， 并 且 和 新 节点 的 文本 相同 ,那么 就 不 需要 执行 
setTextContent 方法 来 重复 设置 相同 的 文本 。 

简单 来 说 ， 就 是 当 新 虚拟 节点 有 文本 属性 , 并且 和 旧 虚 拟 节点 的 文本 属性 不 一 样 时 , 我们 可 
直接 把 视图 中 的 真实 DOM 节点 的 内 容 改 成 新 虚拟 节点 的 文本 。 


7.4.3 ”新 虚拟 节点 无 文本 属性 

如 果 新 创建 的 虚拟 节点 没有 text 属性 ， 那 么 它 就 是 一 个 元 素 节 点 。 元 素 节 点 通常 会 有 子 节 
点 ， 也 就 是 children 属性 ， 但 也 有 可 能 没有 子 节点 ， 所 以 存在 两 种 不 同 的 情况 。 

1. 有 children 的 情况 

当 新 创建 的 虚拟 节点 有 children 属性 时 ， 其 实 还 会 有 两 种 情况 ， 那 就 是 要 看 旧 虚 拟 节点 
(oldVnode ) 是 否 有 children 属性 。 

如 果 旧 虚拟 节点 也 有 children 属性 ， 那 么 我 们 要 对 新 旧 两 个 虚拟 节点 的 children 进行 一 
个 更 详细 的 对 比 并 更 新 。 更 新 children 可 能 会 移动 某 个 子 节点 的 位 置 ， 也 有 可 能 会 删除 或 新 增 
某 个 子 节点 ， 具 体 更 新 children 的 过 程 我 们 会 在 7.5 节 中 详细 介绍 。 


江 
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如 果 旧 虚拟 节点 没有 children 属性 ， 那 么 说 明 旧 虚拟 节点 要 么 是 一 个 空 标签 ， 要 么 是 有 文 
本 的 文本 节点 。 如果 是 文本 节点 ,那么 先 把 文本 清空 让 它 变 成 空 标签 , 然后 将 新 虚拟 节点 (vnode ) 
中 的 children 挨个 创建 成 真实 的 DOM 元 素 节 点 并 将 其 插入 到 视图 中 的 DOM 节点 下 面 。 

2. 无 children 的 情况 

当 新 创建 的 虚拟 节点 既 没 有 text 属性 也 没有 children 属性 时 ， 这 说 明 这 个 新 创建 的 节点 
是 一 个 空 节点 ， 它 下 面 既 没 有 文本 也 没有 子 节点 ， 这 时 如 果 旧 虚拟 节点 (oldVnode ) 中 有 子 节 点 
就 删除 子 节 点 ， 有 文本 就 删除 文本 。 有 什么 期 什么 ， 最 后 达到 视图 中 是 空 标签 的 目的 。 


7.4.4 ”小 结 


本 节 重 点 讨论 了 更 新 节点 的 详细 过 程 以 及 处 理 逻 辑 , 讨论 的 内 容 包 括 新 虚拟 节点 有 文本 时 如 
何 处 理 , 有 children 属性 时 如 何 处 理 , 以 及 没有 children 属性 时 怎么 处 理 等 。 图 7-9 给 出 了 更 
新 节点 的 整体 逻辑 。 
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图 7-9 ”更 新 节点 的 逻辑 
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在 源码 中 ， 真 实 的 实现 过 程 如 图 7-10 所 示 。 


更 新 下 点 
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图 7-10 更 新 节点 的 具体 实现 过 程 


72 第 7 章 patch 


7.5 更 新 子 节点 


在 7.4 节 中 ,我 们 详细 讨论 了 更 新 节点 的 过 程 ， 其 中 讨论 了 当 新 节点 的 子 节点 和 旧 节 点 的 子 
节点 都 存在 并 且 不 相同 时 , 会 进行 子 节点 的 更 新 操作 。 但 我 们 并 没有 详细 讨论 子 节 点 是 如 何 更 新 
的 ， 本 节 将 详细 讨论 如 何 更 新 子 节 点 。 


事实 上 ， 更 新 子 节 点 大 概 可 以 分 为 4 种 操作 : 更 新 节点 、 新 增 节 点 、 删 除 节 点 、 移 动 节 点 位 
置 。 因 此 ， 更 新 子 节点 更 多 的 是 在 讨论 什么 情况 下 需要 更 新 节点 ， 什 么 情况 下 新 增 节 点 等 。 


更 新 子 节点 首先 要 对 比 两 个 子 节点 都 有 哪些 不 同 ， 然 后 针对 不 同 的 情况 做 不 同 的 处 理 。 

例如 ，newChildren (新 子 节 点 列表 ) 中 有 一 个 节点 在 oldchildren ( 旧 子 节点 列表 ) 中 找 
不 到 相同 的 节点 , 这 说 明 这 个 节点 是 因 本 次 状态 更 改 而 新 增 的 节点 ,此 时 就 需要 进行 新 增 节 点 的 
操作 。 

再 例如 ，newchildren 中 的 某 个 节点 和 oldchildren 中 的 某 个 节点 是 同一 个 节点 ,但 位 置 
不 同 ,这 说 明 这 个 节点 是 由 于 状态 变化 而 位 置 发 生 了 移动 的 节点 ,这 时 需要 进行 节点 移动 的 操作 。 

对 比 两 个 子 节 点 列表 ( children )， 首 先 需要 做 的 事情 是 循环 。 循 环 newChildren (新 子 节 
点 列表 )， 每 循环 到 一 个 新 子 节点 ， 就 去 oldchildren ( 旧 子 节点 列表 ) 中 找到 和 当前 节点 相同 
的 那个 旧 子 节点 。 如 果 在 oldchildren 中 找 不 到 ， 说 明 当 前 子 节点 是 由 于 状态 变化 而 新 增 的 节 
点 ,我 们 要 进行 创建 节点 并 插入 视图 的 操作 ; 如 果 找 到 了 ， 就 做 更 新 操作 ; 如 果 找 到 的 旧 子 节点 
的 位 置 和 新 子 节点 不 同 ， 则 需要 移动 节点 等 。 


7.5.1 更 新 策略 

本 节 主 要 针对 新 增 节点 、 更 新 节点 、 移 动 节 点 、 删 除 节点 等 操作 进行 讨论 。 

1. 创建 子 节点 

关于 新 增 节点 ,我们 主要 讨论 什么 情况 下 需要 创建 节点 ,以 及 把 创建 的 节点 搬入 到 真实 DOM 
子 节点 中 哪个 位 置 的 问题 。 

前 面 提 到 过 , 新 旧 两 个 子 节点 列表 是 通过 循环 进行 比 对 的 , 所 以 创建 节点 的 操作 是 在 循环 体 
内 执行 的 ， 其 具体 实现 是 在 oldchildren ( 旧 子 节点 列表 ) 中 寻找 本 次 循环 所 指向 的 新 子 节点 。 

如 果 在 oldchildren 中 没有 找到 与 本 次 循环 所 指向 的 新 子 节点 相同 的 节点 ,那么 说 明 本 次 
循环 所 指向 的 新 子 节点 是 一 个 新 增 节点 。 对 于 新 增 节点 ,我 们 需要 执行 创建 节点 的 操作 ,并 将 新 
创建 的 节点 搬入 到 oldchildren 中 所 有 未 处 理 节点 (未 处 理 就 是 没有 进行 任何 更 新 操作 的 节点 ) 


的 前 面 。 当 节点 成 功 插入 DOM 后 ， 这 一 轮 的 循环 就 结束 了 。 关 于 创建 节点 ， 我 们 在 7.2 节 中 详 
细 介绍 过 。 


你 可 能 会 对 为 什么 插入 到 oldchildren 中 所 有 未 处 理 节点 的 前 面 感 到 很 困惑 ， 没 关系 ， 下 
面 我 们 举例 说 明 一 下 。 
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我 们 先 看 图 7-11 所 示 的 例子 ， 最 上 面 的 DOM 节点 是 视图 中 的 真实 DOM 节点 。 左 下 角 的 节 
点 是 新 创建 的 虚拟 节点 ， 右 下 角 的 节点 是 旧 的 虚拟 节点 。 
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图 7-11 更 新 子 节点 的 一 个 小 例子 
图 7-11 表示 已 经 对 前 两 个 子 节点 进行 了 更 新 ， 当 前 正在 处 理 第 三 个 子 节点 。 当 在 右 下 角 的 
虚拟 子 节点 中 找 不 到 与 左下 角 的 第 三 个 节点 相同 的 节点 时 , 证 明 它 是 新 增 节点 , 这 时 候 需 要 创建 
节点 并 插入 到 真实 DOM 中 ,插入 的 位 置 是 所 有 未 处 理 节 点 的 前 面 ， 也 就 是 虚线 所 指定 的 位 置 。 
你 可 能 会 说 , 插 和 人 到 所 有 已 处 理 节 点 的 后 面 不 也 行 吗 ? 不 是 的 , 如 果 这 个 新 节点 后 面 也 是 一 
个 新 增 节 点 呢 ? 
图 7-12 是 我 们 希望 插入 到 真实 DOM 中 的 位 置 。 而 如 果 以 插入 到 已 处 理 节点 后 面 这 样 的 逻辑 
插入 节点 ， 则 会 出 现 如 图 7-13 所 示 的 问题 。 


i 
(已 处 理 ， 
NS / 


Pn 

(已 处 理 ! /已 处 理 ， 
/ / 

了 


“ 
已 处 理 1 
/ 

AN 


二 过 


《已 处 理 


vip 


(已 处 理 1 
/ 


bb 一 


图 7-12 插入 到 未 处 理 节点 的 前 面 
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插入 到 已 处 理 节点 的 后 惠 


i 
1 
1 
1 
1 
1 


“ 、、 
亿 处 理 ) 
\ A 


2 
已 处 理 ) 
> / 


~- 


7 ~ ee Pp 
已 处 理 ， 亿 处 理 ， 人 忆 处 理 | 
> : 和 六 » / 


wa i 号 .之 


图 7-13 插入 到 已 处 理 节点 的 后 面 

从 图 7-13 中 我 们 会 发 现 ， 节 点 插入 的 位 置 不 是 我 们 希望 插入 的 位 置 ， 因 为 顺序 反 了 ， 这 个 
节点 的 位 置 应 该 是 第 四 位 ， 而 不 是 第 三 位 。 你 可 能 会 问 ， 为 什么 ? 

因为 我 们 是 使 用 虚拟 节点 进行 对 比 ， 而 不 是 真实 DOM 节点 做 对 比 ， 所 以 是 左下 角 的 虚拟 节 
点 和 右 下 角 的 旧 虚 拟 节 点 进行 对 比 ， 而 右 下 角 的 虚拟 节点 表示 已 处 理 的 节点 只 有 两 个 , 不 包括 
我 们 新 插入 的 节点 , 所 以 用 插入 到 已 处 理 节 点 后 面 这 样 的 逻辑 来 插入 节点 ,就 会 插入 一 个 错误 的 
位 置 。 

可 能 你 现在 又 有 疑问 了 ， 节 点 插入 进 真 实 DOM 中 后 ， 真 实 DOM 中 的 节点 越 来 越 多 ， 为 什 
么 没 看 见 删除 节点 的 逻辑 ? 

关于 删除 节点 的 逻辑 ， 我 们 将 在 后 面 详细 介绍 。 

2. 更 新 子 节点 

更 新 节点 本 质 上 是 当 一 个 节点 同时 存在 于 newchildren 和 oldchildren 中 时 需要 执行 的 
操作 。 

如 图 7-14 所 示 ， 两 个 节点 是 同一 个 节点 并 且 位 置 相 同 ， 这 种 情况 下 只 需要 进行 更 新 节点 的 
操作 即 可 。 关 于 更 新 节点 ， 我 们 在 7.4 节 中 已 详细 介绍 过 。 


SN 


7-14 ” 子 节 点 位 置 相 同 
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但 如 果 oldchildren 中 子 节点 的 位 置 和 本 次 循环 所 指向 的 新 子 节 点 的 位 置 不 一 致 时 ， 除 了 
对 真实 DOM 节点 进行 更 新 操作 外 ， 我 们 还 需要 对 这 个 真实 DOM 节点 进行 移动 节点 的 操作 。 


3. 移动 子 节点 


移动 节点 通常 发 生 在 newChildren 中 的 某 个 节点 和 oldChildren 中 的 某 个 节点 是 同一 个 节 
点 ， 但 是 位 置 不 同 ， 所 以 在 真实 的 DOM 中 需要 将 这 个 节点 的 位 置 以 新 虚拟 节点 的 位 置 为 基准 进 
行 移动 。 

如 图 7-15 所 示 ， 当 oldchildren 中 找到 的 节点 和 newChildren 中 的 节点 位 置 不 同时 ， 视 图 


中 真实 DOM 节点 就 会 移动 到 newChildren 中 节点 所 在 的 位 置 。 
站 > 
移动 
同一 个 节点 


图 7-15 移动 子 节点 的 位 置 
通过 Node.insertBefore() 方 法 ,我 们 可 以 成 功 地 将 一 个 已 有 节点 移动 到 一 个 指定 的 位 置 。 
但 怎么 得 知 新 虚拟 节点 的 位 置 是 哪里 呢 ? 换 句 话说， 怎么 知道 应 该 把 节点 移动 到 哪里 呢 ? 


其 实 得 到 这 个 位 置 并 不 难 。 对 比 两 个 子 节点 列表 是 通过 从 左 到 右 循环 newChildren 这 个 列 
表 ， 然后 每 循环 一 个 节点 ， 就 去 oldCchildren 中 寻找 与 这 个 节点 相同 的 节点 进行 处 理 。 也 就 是 
说 ,newChildren 中 当前 被 循环 到 的 这 个 节点 的 左边 都 是 被 处 理 过 的 。 那 就 不 难 发 现 ,这 个 节点 
的 位 置 是 所 有 未 处 理 节 点 的 第 一 个 节点 。 
所 以 ， 只 要 把 需要 移动 的 节点 移动 到 所 有 未 处 理 节 点 的 最 前 面 ， 就 能 实现 我 们 的 目的 ， 如 
图 7-16 所 示 。 
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移动 到 所 有 未 处 理 节点 的 最 前 面 
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同一 个 节点 
图 7-16 将 节点 移动 到 所 有 未 处 理 节 点 的 最 前 面 


7-16 表示 正在 处 理 第 三 个 节点 ， 这 时 在 oldChildren 中 找到 的 相同 节点 是 第 四 个 节点 。 


由 于 位 置 不 同 ， 所 以 需要 移动 节点 ,移动 节点 的 位 置 是 所 有 未 处 理 节 点 的 最 前 面 。 本 例 中 ,将 第 
四 个 节点 移动 到 所 有 未 处 理 节 点 的 最 前 面 ， 就 是 将 节点 从 第 四 个 变 成 了 第 三 个 。 


节点 更 新 并 且 移动 完 位 置 后 ， 开 始 进 行 下 一 轮 循环 ， 也 就 是 开始 处 理 newChildren 中 的 第 


四 个 节点 。 


关于 怎么 分 辨 哪些 节点 是 处 理 过 的 ， 哪 些 节 点 是 未 处 理 的 ， 我 们 将 在 7.5.3 节 中 详细 讨论 。 


4. 删除 子 节点 


删除 子 节点 ， 本 质 上 是 删除 那些 oldchildren 中 存在 但 newchildren 中 不 存在 的 节点 。 
用 图 7-12 来 举例 ,左下 角 的 newchildren 和 右 下 角 的 oldchildren 中 前 两 个 节点 是 相同 的 。 


在 newChildren 中 ， 右 面 两 个 节点 是 新 增 节 点 ; 在 oldchildren 中 ， 右 边 两 个 节点 是 废弃 的 需 
要 被 删除 的 节点 。 


可 以 得 出 结论 ， 当 newchildren 中 的 所 有 节点 都 被 循环 了 一 遍 后 ， 也 就 是 循环 结束 后 ， 如 


果 oldchildren 中 还 有 剩余 的 没有 被 处 理 的 节点 ， 那么 这 些 节 点 就 是 被 废弃 、 需 要 删除 的 节点 。 


这 
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在 图 7-12 中 , 真实 DOM 市 点 中 有 6 个 节点 , 其 中 最 右面 的 两 个 节点 是 需要 删除 的 节点 ， 当 
废弃 的 节点 被 删除 后 , 你 会 发 现 真实 DOM 中 的 子 节点 和 newChildren 变 成 一 样 的 了 。 这 不 
我 们 想 要 的 效果 吗 ? 
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7.5.2 ”优化 策略 


通常 情况 下 , 并 不 是 所 有 子 节点 的 位 置 都 会 发 生 移动 , 一 个 列表 中 总 有 几 个 节点 的 位 置 是 不 
变 的 。 针 对 这 些 位 置 不 变 的 或 者 说 位 置 可 以 预测 的 节点 ,我 们 不 需要 循环 来 查找 ， 因 为 我 们 有 一 
个 更 快捷 的 查找 方式 。 

假设 有 一 个 场景 ,我 们 只 是 修改 了 列表 中 某 个 数据 的 内 容 , 而 没有 新 增 数据 或 者 删除 数据 等 ， 
这 种 情况 下 newChildren 和 oldchildren 中 所 有 节点 的 位 置 都 是 相同 的 ， 这 时 节点 的 位 置 就 是 
可 以 预测 的 ， 不 需要 循环 也 可 以 知道 oldchildren 中 的 哪个 节点 和 被 寻找 的 新 子 节点 是 同一 个 
节点 。 


只 需要 尝试 使 用 相同 位 置 的 两 个 节点 来 比 对 是 否 是 同一 个 节点 : 如 果 恰 巧 是 同一 个 节点 , 直 
接 就 可 以 进入 更 新 节点 的 操作 ; 如 果 尝 试 失败 了 ， 再 用 循环 的 方式 来 查找 节点 。 
这 样 做 可 以 很 大 程度 地 避免 循环 oldchildren 来 查找 节点 , 从 而 使 执行 速度 得 到 很 大 的 提升 。 
如 果 我 们 把 这 种 很 快速 的 查找 节点 的 方式 称 为 快捷 查找 ,那么 它 共 有 4 种 查找 方式 ,分 别 是 : 
口 新 前 与 旧 前 
口 新 后 与 旧 后 
口 新 后 与 旧 前 
口 新 前 与 旧 后 
你 可 能 会 对 “新 前 ”“ 旧 前 ” 没关系 ， 因 为 这 是 我 自己 起 的 名 字 。 接 下 
来 ， 我 将 详细 介绍 这 些 名 词 都 是 什么 意 


从 图 7-17 中 可 以 看 出 “新 前 ”“ 新 后 ”“ 旧 前 ”“ 旧 后 ”这 4 个 名 词 分 别 对 应 4 个 节点 ， 图 中 
有 两 个 虚拟 节点 , 左边 那个 虚拟 节点 是 由 于 状态 的 变化 而 新 生成 的 虚拟 节点 , 右边 那个 虚拟 节点 


是 上 一 次 渲染 DOM 时 用 的 旧 的 虚拟 节点 。 

口 新 前 : newChildren 中 所 有 未 处 理 的 第 一 个 节点 。 
口 新 后 : newChildren 中 所 有 未 处 理 的 最 后 一 个 节点 。 
口 旧 前 : oldchildren 中 所 有 未 处 理 的 第 一 个 节点 。 
口 旧 后 : oldchildren 中 所 有 未 处 理 的 最 后 一 个 节点 。 


新 前 新 后 旧 前 旧 后 


图 7-17 “新 前 ”“ 新 后 ”“ 旧 前 ”“ 旧 后 ”所 代表 的 节点 
现在 我 们 已 经 清楚 了 这 些 名 词 的 意思 , 前 文中 提 到 比较 快捷 的 查找 方式 有 4 种,， 接 下 来 我 们 
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详细 介绍 这 4 种 方式 。 
1. 新 前 与 旧 前 
顾名思义 ,“ 新 前 ”与 “ 旧 前 ”的 意思 就 是 尝试 使 用 “新 前 ”这 个 节点 与 “ 旧 前 ”这 个 节点 
对 比 ， 对 比 它们 俩 是 不 是 同一 个 节点 。 如 果 是 同一 个 节点 ， 则 说 明 我 们 不 费 吹 灰 之 力 就 在 
oldchildren 中 找到 了 这 个 虚拟 节点 ， 然 后 使 用 7.4 节 中 介绍 的 更 新 节点 操作 将 它们 俩 进行 对 比 
并 更 新 视图 ， 如 图 7-18 所 示 。 


图 7-18 尝试 对 比 “ 新 前 ”与 “ 旧 前 ”这 两 个 节点 是 否 是 同一 个 节点 

由 于 “新 前 ”与 “ 旧 前 ”的 位 置 相 同 ， 所 以 并 不 需要 执行 移动 节点 的 操作 ， 只 需要 更 新 节点 
即 可 。 

如 果 不 是 同一 个 节点 ， 没 关系 ， 一 共有 4 种 快捷 查找 方式 ， 挨 个 试 一 遍 即 可 。 如 果 都 不 行 
最 后 再 使 用 循环 来 查找 节点 。 

2. 新 后 与 旧 后 

当 “ 新 前 ”与 “ 旧 前 ”对 比 后 发 现 不 是 同一 个 节点 ， 这 时 可 以 尝试 用 “新 后 ”与 “ 旧 后 ”的 
方式 来 比 对 它们 俩 是 否 是 同一 个 节点 。 
“新 后 ”与 “ 的 意思 是 使 用 “新 后 ”这 个 节点 和 “ 旧 后 ”这 个 节点 对 比 ， 对 比 它们 俩 
是 不 是 同一 个 oe 0 个 节点 ， 就 将 这 两 个 节点 进行 对 比 并 更 新 视图 ， 如 图 7-19 所 示 。 


new old 
新 前 旧 前 


是 否 是 同一 个 节点 
图 7-19 尝试 对 比 “ 新 后 ”与 “ 旧 后 ”这 两 个 节点 是 否 是 同一 个 节点 


由 于 “新 后 ”与 “ 这 两 个 节点 的 位 置 相同 ， 所 以 只 需要 执行 更 新 节点 的 操作 即 可 ,不 
需要 执行 移动 节点 的 0 。 
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如 果 对 比 之 后 发 现 “ 新 后 ”和 “ 旧 后 ”也 不 是 同一 个 节点 ， 则 继续 尝试 对 比 “ 新 后 ”与 “ 旧 
前 ”是 和 否 是 同一 个 节点 。 

3. 新 后 与 日 前 

“新 后 ”与 “ 旧 前 ”的 意思 是 使 用 “新 后 ”这 个 节点 与 “ 旧 前 ”这 个 节点 进行 对 比 ， 通 过 对 
比 来 分 辨 它们 俩 是 不 是 同一 个 节点 。 如 果 是 同一 个 节点 ， 就 对 比 它 们 俩 并 更 新 视图 ， 如 图 7-20 
所 示 。 


是 否 是 同一 个 节点 
7.20 尝试 对 比 “ 新 后 ”与 “ 旧 前 ”这 两 个 节点 是 否 是 同一 个 节点 
如 果 “ 新 后 ”与 “ 旧 前 ”是 同一 个 节点 ， 那 么 由 于 它们 的 位 置 不 同 ， 所 以 除了 更 新 节点 外 ， 
还 需要 执行 移动 节点 的 操作 ， 如 图 7-21 所 示 。 


移动 位 置 
old 


DS 
是 否 是 同一 个 节点 
图 7-21 移动 节点 操作 
从 图 7-21 中 可 以 看 出 ， 当 “新 后 ”与 “ 旧 前 ”是 同一 个 节点 时 ， 在 真实 DOM 中 除了 做 更 新 
操作 外 ， 还 需要 将 节点 移动 到 oldchildren 中 所 有 未 处 理 节点 的 最 后 面 。 
你 可 能 对 为 什么 移动 到 oldchildren 中 所 有 未 处 理 节 点 的 最 后 面 感到 困惑 ， 接 下 来 我 们 会 
详细 介绍 为 什么 移动 到 这 个 位 置 。 
更 新 节点 是 以 新 虚拟 节点 为 基准 ， 子 节点 也 不 例外 ， 所 以 在 图 7-21 中 ， 因 为 “新 后 ”这 个 
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节点 是 最 后 一 个 节点 ， 所 以 真实 DOM 中 将 节点 移动 到 最 后 不 难 理 解 ， 让 我 们 感到 困惑 的 是 为 什 
么 移动 到 oldchildren 中 所 有 未 处 理 节 点 的 最 后 面 。 


这 里 我 们 举 个 例子 ， 如 图 7-22 所 示 。 


移动 到 所 有 未 处 理 节 点 的 最 后 面 


old 


同一 个 节点 
图 7-22 ”移动 到 所 有 未 处 理 节 点 的 最 后 面 


如 图 7-22 所 示 , 当真 实 DOM 子 节点 左右 两 侧 已 经 有 节点 被 更 新 , 只 有 中 间 这 部 分 节点 未 处 
理 时 ,， “新 后 ” a sn em 所 以 真实 DOM 节点 移动 位 置 时 ， 需 
要 移动 到 oldchildren 中 所 有 未 处 理 节 点 的 最 后 面 。 只 有 移动 到 未 处 理 节点 的 最 后 面 ， 它 的 位 
置 才 与 “新 后 ”这 个 节点 的 位 置 相同 。 

如 果 对 比 之 后 发 现 这 两 个 节点 也 不 是 同一 个 节点 ， 则 继续 尝试 对 比 “ 新 前 ”与 “ 旧 后 ”是 否 
是 同一 个 节点 。 

4. 新 前 与 旧 后 

“新 前 ”与 “ 旧 后 ”的 意思 是 使 用 “新 前 ”与 “ 旧 后 ”这 两 个 节点 进行 对 比 ， 对 比 它们 是 否 
是 同一 个 节点 ， 如 果 是 同一 个 节点 ， 则 进行 更 新 节点 的 操作 ， 如 图 7-23 所 示 。 


old 


旧 前 


是 否 是 同一 个 节点 ? 


图 7-23 ”尝试 对 比 “ 新 前 ”与 “ 旧 后 ”这 两 个 节点 是 否 是 同一 个 节点 
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由 于 “新 前 ”与 “ 旧 后 ”这 两 个 节点 的 位 置 不 同 ， 所 以 除了 更 新 节点 的 操作 外 ， 还 需要 进行 
移动 节点 的 操作 ， 如 图 7-24 所 示 。 


移动 位 置 


是 否 是 同一 个 节点 ? 
图 7-24 移动 节点 操作 
从 图 7-24 中 可 以 看 出 ， 当 “新 前 ”与 “ 旧 后 ”是 同一 个 节点 时 ， 在 真实 DOM 中 除了 做 更 新 
操作 外 ， 还 需要 将 节点 移动 到 oldchildren 中 所 有 未 处 理 节点 的 最 前 面 。 


将 节点 移动 到 oldchildren 中 所 有 未 处 理 节 点 的 最 前 面 的 原因 ， 与 前 面 介 绍 的 “新 后 ”与 
“ 旧 前 ”的 逻辑 是 一 样 的 ， 如 图 7-25 所 示 。 
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同一 个 节点 


图 7-25 移动 到 所 有 未 处 理 节 点 的 最 前 面 
如 图 7-25 所 示 ， 当 真实 的 DOM 节点 中 已 经 有 节点 被 更 新 , 并 且 更 新 到 第 二 个 节点 时 , 我 们 
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发 现 oldchildren 中 对 应 的 节点 在 第 三 个 的 位 置 上 ， 这 时 需要 将 “ 旧 后 ”这 个 节点 更 新 并 移动 
到 第 二 个 的 位 置 上 , 所 以 只 需要 将 节点 移动 到 所 有 未 处 理 节点 的 最 前 面 ,就 能 实现 移动 到 第 二 个 
位 置 的 目的 。 

也 就 是 说 , 已 更 新 过 的 节点 都 不 用 管 。 因 为 更 新 过 的 节点 无 论 是 节点 的 内 容 或 者 节点 的 位 置 ， 
都 是 正确 的 ,更 新 完 后 面 就 不 需要 再 进行 更 改 了 。 所 以 , 我 们 只 需要 在 所 有 未 更 新 的 节点 区 间 内 
进行 移动 和 更 新 操作 即 可 。 

如 果 前 面 这 4 种 方式 对 比 之 后 都 没 找到 相同 的 节点 , 这 时 再 通过 循环 的 方式 去 oldChildren 
中 详细 找 一 圈 ， 看 看 能 否 找 到 。 

大 部 分 情况 下 ， 通 过 前 面 这 4 种 方式 就 可 以 找到 相同 的 节点 ， 所 以 节省 了 很 多 次 循环 操作 。 


7.5.3 ”哪些 节点 是 未 处 理 过 的 

你 可 能 会 发 现 ， 所 有 的 对 比 都 是 针对 未 处 理 的 节点 的 , 已 处 理 过 的 节点 忽略 不 计 。 那 么 ， 怎 
么 分 辨 哪些 节点 是 处 理 过 的 ， 哪 些 节点 是 未 处 理 过 的 呢 ? 

这 个 问题 就 要 从 循环 说 起 了 ， 因 为 我 们 的 逻辑 都 是 在 循环 体内 处 理 的 , 所 以 只 要 让 循环 条 件 
保证 只 有 未 处 理 过 的 节点 才能 进入 循环 体内 , 就 能 达到 忽略 已 处 理 过 的 节点 从 而 只 对 未 处 理 节 点 
进行 对 比 和 更 新 等 操作 。 

事实 上 ， 这 个 功能 不 难 实现 ， 随 便 一 个 正常 的 循环 都 能 实现 这 个 效果 ， 从 前 往 后 循环 ， 循 环 
一 个 处 理 一 个 ， 能 被 循环 到 的 都 是 未 处 理 过 的 节点 ， 处 理 到 最 后 所 有 的 节点 都 处 理 过 了 。 

但 由 于 前 面 我 们 的 优化 策略 ， 节 点 是 有 可 能 会 从 后 面 对 比 的 ， 对 比 成 功 就 会 进行 更 新 处 理 ， 
也 就 是 说 ， 我 们 的 循环 体内 的 逻辑 由 于 优化 策略 ， 不 再 是 只 处 理 所 有 未 处 理 过 的 节点 的 第 一 个 ， 
而 是 有 可 能 会 处 理 最 后 一 个 ， 这 种 情况 下 就 不 能 从 前 向 后 循环 ， 而 应 该 是 从 两 边 向 中 间 循 环 。 

那么 ， 怎 样 实现 从 两 边 向 中 间 循 环 呢 ? 

首先 ， 我 们 先 准备 4 个 变量 : oldstartIdx、oldEndIdx、newStartIdx 和 newEndIdx。 

这 4 个 变量 分 别 表示 oldchildren 的 开始 位 置 的 下 标 (oldstartIdx ) 和 结束 位 置 的 下 标 
(oldEndIdx )， 以 及 newChildren 的 开始 位 置 的 下 标 (newstartIdx ) 和 结束 位 置 的 下 标 
(newEndIdx )。 

在 循环 体内 ， 每 处 理 一 个 节点 ， 就 将 下 标 向 指定 的 方向 移动 一 个 位 置 , 通常 情况 下 是 对 新 旧 
两 个 节点 进行 更 新 操作 , 就 相当 于 一 次 性 处 理 两 个 节点 , 将 新 旧 两 个 节点 的 下 标 都 向 指定 方向 移 
动 一 个 位 置 。 

开始 位 置 所 表示 的 节点 被 处 理 后 ， 就 向 后 移动 一 个 位 置 ; 结束 位 置 的 节点 被 处 理 后 ， 则 向 前 
移动 一 个 位 置 。 

也 就 是 说 ，oldstartIdx 和 newStartIdx 只 能 向 后 移动 ， 而 oldEndIdx 和 newEndIdx 只 能 
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向 前 移动 。 
当 开 始 位 置 大 于 等 于 结束 位 置 时 ， 说 明 所 有 节点 都 遍历 过 了 ， 则 结束 循环 : 


61 while (oldStartIdx <= 01dEndIdx && newStartIdx <= newEndIdx) { 
62 // 做 点 什么 
63 } 


通过 上 面 的 循环 条 件 ， 就 可 以 保证 循环 体内 的 节点 都 是 未 处 理 的 。 

你 可 能 会 发 现 ， 这 个 循环 条 件 是 无 论 newchildren 或 者 oldchildren， 只 要 它们 两 个 中 有 
一 个 循环 完毕 ， 就 会 退出 循环 。 那么 ， 当 新 子 节点 和 旧 子 节点 的 节点 数量 不 一 致 时 , 会 导致 循环 
结束 后 仍然 有 未 处 理 的 节点 ， 也 就 是 说 这 个 循环 将 无 法 覆盖 所 有 节点 。 

确实 是 无 法 覆盖 所 有 节点 ,但 正 是 因为 这 样 ， 才 会 少 循环 几 次 ， 提 升 一 些 性 能 。 你 可 能 会 觉 
得 惊讶 ， 为 什么 ? 

因为 循环 的 目的 是 找 出 差异 , 针对 差异 来 做 对 应 的 操作 , 但 现在 直接 就 可 以 判断 出 差异 ， 所 
以 就 不 需要 再 循环 对 比 差异 了 。 

你 可 能 更 惊讶 了 ， 为 什么 ? 

因为 如 果 是 oldchildren 先 循环 究 毕 ， 这 个 时 候 如 果 newchildren 中 还 有 剩余 的 节点 ， 那 
么 说 明 什么 问题 ? 说 明 这 些 节点 都 是 需要 新 增 的 节点 ， 直 接 把 这 些 节点 插入 到 DOM 中 就 行 了 ， 
不 需要 循环 比 对 了 。 

如 果 是 newchildren 先 循环 完毕 ， 这 时 如 果 oldchildren 还 有 剩余 的 节点 ， 又 说 明了 什么 
问题 ? 这 说 明 oldchildren 中 剩余 的 节点 都 是 被 废弃 的 节点 ， 是 应 该 被 删除 的 节点 。 这 时 不 需 
要 循环 对 比 就 可 以 知道 需要 将 这 些 节点 从 DOM 中 移 除 。 

找到 newchildren 中 所 有 剩余 的 节点 并 不 难 ， 由 于 oldChildren 先 被 循环 完 ， 所 以 此 时 
newStartIdx 肯定 是 小 于 newEndIdx 的 ， 那 么 在 newChildren 中 ， 下 标 在 newstartIdx 和 
newEndIdx 之 间 的 所 有 节点 都 是 未 处 理 的 节点 。 

同 理 ， 找 到 oldchildren 中 所 有 剩余 的 节点 也 很 简单 。 由 于 newChildren 先 被 循环 完 ， 所 
以 oldstartIdx 小 于 oldEndIdx， 那 么 在 oldchildren 中 ,下 标 在 oldstartIdx 和 oldEndIdx 
之 间 的 所 有 节点 都 是 未 处 理 的 节点 。 


7.5.4 “小结 
本 节 重 点 讨论 了 更 新 子 节点 的 详细 过 程 以 及 处 理 逻 辑 。 


在 本 方 中 ， 我 们 学 习 了 更 新 子 节点 可 以 分 为 4 种 操作 ,分 别 是 : 新 增 子 节点 、 更 新 子 节 点 、 
移动 子 节点 和 删除 子 节点 。 
在 新 增 子 节点 中 , 我 们 详细 讨论 了 什么 情况 下 需要 创建 子 节 点 , 以 及 把 创建 的 子 节点 插入 到 


什么 位 置 。 
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接 下 来 ,我 们 又 讨论 了 更 新 子 节点 的 过 程 。 如 果 在 oldchildren 中 可 以 找到 与 新 子 节点 相 
同 的 节点 ， 就 需要 更 新 它们 。 


如 果 在 oldchildren 中 找到 的 节点 的 位 置 和 新 子 节点 的 位 置 不 一 样 , 需要 将 DOM 中 的 节点 
移动 到 新 子 节 点 所 在 的 位 置 。 


删除 节点 的 操作 发 生 在 循环 结束 后 。 当 循环 结束 后 , oldChildren 中 所 有 未 处 理 的 节点 都 是 
需要 被 删除 的 节点 。 


随后 我 们 还 讨论 了 优化 策略 ， ee 
， 我 们 讨论 了 怎么 分 辨 哪些 子 节点 是 未 处 理 过 的 节点 。 
图 7-26 给 出 了 更 新 子 节 点 的 整体 流程 。 
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newStartVnode 设置 为 oldstartVnode 前 面 patchvnode 操 作 是 同一 个 节点 ? 
逢 二 站 闻 世 抱 


图 7-26 更 新 子 节 点 的 整体 流程 
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图 7-26 ( 续 ) 
在 图 7-26 中 ， 有 些 名 词 前 面 并 没有 提 到 过 ， 这 里 给 出 解释 。 


口 oldstartVnode: oldChildren 中 所 有 未 处 理 的 第 一 个 节点 ， 与 前 文中 提 到 的 “ 旧 前 ” 
是 同一 个 节点 。 
口 oldEndvnode: oldchildren 中 所 有 未 处 理 的 最 后 一 个 节点 ， 与 前 文中 提 到 的 “ 旧 后 ” 
是 同一 个 节点 。 
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口 newStartvnode: newChildren 中 所 有 未 处 理 的 第 一 个 节点 ， 与 前 文中 提 到 的 “新 前 ” 

是 同一 个 节点 。 

口 newEndvnode: newChildren 中 所 有 未 处理 的 最 后 一 个 节点 ,与 前 文中 提 到 的 “新 后 ” 
是 同一 个 节点 。 

在 图 7-26 中 ， 我 们 看 到 在 循环 的 一 开始 先 判断 oldstartvnode 和 oldEndvnode 是 否 存在 ， 
如 果 不 存 在 ,， 则 直接 跳 过 本 次 循环 ， 进 行 下 一 轮 循 环 (也 就 是 说 ， 如 果 这 个 节点 不 存在 ， 则 直接 
跳 过 这 个 节点 ， 处 理 下 一 个 节点 )。 

之 所 以 有 这 么 一 个 判断 , 主要 是 为 了 处 理 旧 节 点 已 经 被 移动 到 其 他 位 置 的 情况 。 移 动 节点 时 ， 
真正 移动 的 是 真实 DOM 节点 。 移 动 真实 DOM 节点 后 ， 为 了 防止 后 续 重 复 处 理 同 一 个 节点 ， 旧 
的 虚拟 子 节点 就 会 被 设置 为 undefined， 用 来 标记 这 个 节点 已 经 被 处 理 并 且 移 动 到 其 他 位 置 。 

在 图 7-26 中 ， 有 一 部 分 逻辑 是 建立 key 与 index 索引 的 对 应 关系 。 这 部 分 内 容 前 面 并 没有 
提 到 。 在 Vuejjs 的 模板 中 ， 泻 染 列表 时 可 以 为 节点 设置 一 个 属性 key， 这 个 属性 可 以 标示 一 个 节 
点 的 唯一 ID。Vue.js 官方 非常 推荐 在 泻 染 列 表 时 使 用 这 个 属性 ,我 也 非常 推荐 使 用 它 , 为 什么 呢 ? 

前 面 提 到 过 ， 在 更 新 子 节点 时 ， 需 要 在 ol1dChildren 中 循环 去 找 一 个 节点 。 但 是 如 果 我 们 
在 模板 中 演 染 列表 时 ， 为 子 节点 设置 了 属性 key， 那 么 在 图 7-26 中 建立 key 与 index 索引 的 对 
应 关系 时 ,就 生成 了 一 个 key 对 应 着 一 个 节点 下 标 这 样 一 个 对 象 。 也 就 是 说 ,如 果 在 节点 上 设置 
了 属性 key , 那么 在 oldchildren 中 找 相同 节点 时 , 可 以 直接 通过 key 拿 到 下 标 , 从 而 获取 节点 。 
这 样 ， 我 们 根本 不 需要 通过 循环 来 查找 节点 。 


7.6 总 结 


本 章 中 ， 我 们 介绍 了 虚拟 DOM 中 最 关键 的 部 分 : patch。 


通过 patch 可 以 对 比 新 旧 两 个 虚拟 DOM， 从 而 只 针对 发 生 了 变化 的 节点 进行 更 新 视图 的 操 
作 。 本 章 详 细 介 绍 了 如 何 对 比 新 旧 两 个 节点 以 及 更 新 视图 的 过 程 。 

在 本 章 开始 , 我 们 主要 讨论 了 在 什么 情况 下 创建 新 节点 , 将 新 节点 插入 到 什么 位 置 。 还 讨论 
了 在 什么 情况 下 删除 节点 ， 删 除 哪个 节点 ， 以 及 在 什么 情况 下 修改 节点 ， 修 改 哪个 节点 等 问题 。 

随后 ， 我 们 介绍 了 从 虚拟 节点 创建 真实 节点 并 泻 染 到 视图 的 详细 过 程 。 

接 下 来 ， 我 们 又 介绍 了 一 个 元 素 是 怎样 从 视图 中 删除 的 。 

然后 ， 详 细 介绍 了 更 新 节点 的 详细 过 程 。 


最 后 ， 详 细 讨论 了 更 新 子 节点 的 过 程 ， 其 中 包括 创建 新 增 的 子 节点 、 删 除 废弃 的 子 节点 、 更 
新 发 生变 化 的 子 节点 以 及 移动 位 置 发 生 了 变化 的 子 节 点 等 。 


和 左 和 一 大 人 


时 二 局 


模板 编译 诛 理 


在 Vuejjs 内 部 , 模板 编译 是 一 项 比较 重要 的 技术 。 我 们 平时 使 用 Vuejs 进行 开发 时 ,会 经 常 

使 用 模板 。 模 板 赋予 我 们 很 多 强大 的 能 力 ， 例 如 可 以 在 模板 中 访问 变量 。 
但 在 Vuejs 中 创建 HTML 并 不 是 只 有 模板 这 一 种 途径 ， 我 们 既 可 以 手动 写 泻 染 函 数 来 创建 
HTML， 也 可 以 在 Vuejjs 中 使 用 JSX 来 创建 HTML。 
演 染 函数 是 创建 HTML 最 原始 的 方法 。 模 板 最 终 会 通过 编译 转换 成 演 染 函数 ， 演 染 函 数 执 
行 后 ， 会 得 到 一 份 vnode 用 于 虚拟 DOM 泻 染 。 所 以 模板 编译 其 实 是 配合 虚拟 DOM 进行 演 染 ， 
这 也 是 本 书 先 介 绍 虚 拟 DOM 后 介绍 模板 编译 的 原因 。 

本 篇 中 ， 我 们 将 会 详细 介绍 模板 转换 成 泻 染 函 数 的 详细 过 程 。 


模板 编译 


在 上 一 篇 中 ， 我 们 详细 介绍 了 虚拟 DOM， 其 中 介绍 的 大 部 分 知识 都 是 关于 虚拟 DOM 拿 到 
vnode 后 所 做 的 事 ， 而 模板 编译 所 介绍 的 内 容 是 如 何 让 虚拟 DOM 拿 到 vnode。 图 8-1 给 出 了 模板 
编译 在 整个 泻 染 过 程 中 的 位 置 。 

模板 编译 虚拟 DOM 

\ LL L 

模板 ”一 一 一 > 模板 编译 用 户 界 画 
图 8-1 模板 编译 在 整个 泻 染 过 程 中 的 位 置 

Vue.js 提供 了 模板 语法 ， 人 允许 我 们 声明 式 地 描述 状态 和 DOM 之 间 的 绑 定 关系 ， 然 后 通过 模 
板 来 生成 真实 DOM 并 将 其 呈现 在 用 户 界 面 上 。 

在 底层 实现 上 ，Vue.js 会 将 模板 编译 成 虚拟 DOM 洽 染 函数 。 当 应 用 内 部 的 状态 发 生变 化 时 ， 
Vuejs 可 以 结合 响应 式 系统 ， 聪 明 地 找 出 最 小 数量 的 组 件 进行 重新 泻 染 以 及 最 少量 地 进行 DOM 
操作 。 

关于 如 何 找 出 最 小 数量 的 组 件 以 及 如 何 最 少量 地 操作 DOM， 我 们 在 第 一 篇 和 第 二 篇 中 已 详 


细 介 绍 过 。 


vnode 


8.1 概念 

平时 使 用 模板 时 ， 可 以 在 模板 中 使 用 一 些 变量 来 填充 模板 ， 还 可 以 在 模板 中 使 用 JavaScript 
表达 式 ， 又 或 者 是 使 用 一 些 指令 等 。 

这 些 功能 在 HTML 语法 中 是 不 存在 的 ， 那 么 为 什么 在 Vue.js 的 模板 中 就 可 以 使 用 各 种 很 灵 
活 的 语法 呢 ? 这 就 多 亏 了 模板 编译 赋予 了 模板 强大 的 功能 。 

模板 编译 的 主要 目标 就 是 生成 泻 染 函 数 ， 如 图 8-2 所 示 。 而 泻 染 函数 的 作用 是 每 次 执行 它 ， 
它 就 会 使 用 当前 最 新 的 状态 生成 一 份 新 的 vnode， 然 后 使 用 这 个 vnode 进行 泻 染 。 
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图 8-2 模板 编译 的 作用 
那么 ， 如 何 将 模板 编译 成 泻 染 函数 呢 ? 


8.2 ”将 模板 编译 成 泻 染 函 数 

将 模板 编译 成 演 染 函数 可 以 分 两 个 步骤 ， 先 将 模板 解析 成 AST ( Abstract Syntax Tree， 抽 象 
语法 树 )， 然 后 再 使 用 AST 生成 演 染 函数 。 

但 是 由 于 静态 节点 不 需要 总 是 重新 泻 染 ， 所 以 在 生成 AST 之 后 、 生 成 泻 染 函数 之 前 这 个 阶 
段 , 需要 做 一 个 操作 ， 那 就 是 遍历 一 遍 AST， 给 所 有 静态 节点 做 一 个 标记 ,这 样 在 虚拟 DOM 中 
更 新 节点 时 ， 如 果 发 现 节点 有 这 个 标记 ， 就 不 会 重新 演 染 它 。 


所 以 ， 在 大 体 逻 辑 上 ， 模板 编译 分 三 部 分 内 容 : 


口 将 模板 解析 为 AST 国 国 


口 遍历 AST 标记 静态 节点 
口 使 用 AST 生成 泻 染 函数 


这 三 部 分 内 容 在 模板 编译 中 分 别 抽象 出 三 个 模块 来 实现 各 自 的 功能 ， 分 别 是 : 


口 解析 器 
口 优化 器 
口 代码 生成 右 


图 8-3 给 出 了 模板 编译 的 整体 流程 。 
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图 8-3 ”模板 编译 的 整体 流程 
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8.2.1 解析 器 
解析 器 的 作用 前 面 已 经 提 到 过 , 其 目标 很 明确 , 只 实现 一 个 功能 , 那 就 是 将 模板 解析 成 AST。 


在 解析 需 内 部 ， 分 成 了 很 多 小 解析 器 ， 其 中 包括 过 滤 需 解析 器、 文本 解析 器 和 HTML 解析 
器 。 然 后 通过 一 条 主线 将 这 些 解 析 器 组 装 在 一 起 ， 如 岁 8-4 所 示 。 


HTML 解 析 器 文本 解析 器 


主线 上 过 滤器 解析 器 


图 8-4 解析 器 

在 使 用 模板 时 , 我 们 可 以 在 其 中 使 用 过 滤器 , 而 过 滤器 解析 器 的 作用 就 是 用 来 解析 过 滤器 的 。 

顾名思义 ， 文 本 解析 需 就 是 用 来 解析 文本 的 。 你 可 能 会 问 , 文本 就 是 一 段 文字 ， 有 什么 好 解 
析 的 ? 

其 实 文 本 解析 器 的 主要 作用 是 用 来 解析 带 变量 的 文本 ， 什 么 是 带 变量 的 文本 ? 

下 面 这 段 代 码 中 的 name 就 是 变量 ， 而 这 样 的 文本 叫 作 带 变量 的 文本 : 

01 Hello {{ name }} 

不 带 变量 的 文本 是 一 段 纯 文本 ， 不 需要 使 用 文本 解析 器 来 解析 。 

最 后 也 是 最 重要 的 是 HTML 解析 器 ， 它 是 解析 需 中 最 核心 的 模块 ， 它 的 作用 就 是 解析 模板 ， 
每 当 解 析 到 HTML 标签 的 开始 位 置 、 结 束 位 置 、 文 本 或 者 注释 时 ， 都 会 触发 钩子 函数 ， 然 后 将 
相关 信息 通过 参数 传递 出 来 。 

主线 上 做 的 事 就 是 监听 HTML 解析 需 。 每 当 触发 钩子 函数 时 , 就 生成 一 个 对 应 的 AST 节点 。 
生成 AST 前 ， 会 根据 类 型 使 用 不 同 的 方式 生成 不 同 的 AST。 例 如 ， 如 果 是 文本 节点 ， 就 生成 文 
本 类 型 的 AST。 


这 个 AST 其实 和 vnode 有 点 类 似 ， 都 是 使 用 JavaScript 中 的 对 象 来 表示 节点 。 
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当 HTML 解析 器 把 所 有 模板 都 解析 完毕 后 ，AST 也 就 生成 好 了 。 关 于 如 何 解析 ， 我 们 会 在 
第 9 章 中 详细 介绍 。 
8.2.2 ”优化 器 


优化 需 的 目标 是 遍历 AST, 检测 出 所 有 静态 子 树 ( 永远 都 不 会 发 生变 化 的 DOM 节点 ) 并 给 
其 打 标 记 。 


例如 : 
61 《py> 我 是 静态 节点 ， 我 不 需要 发 生变 化 /py> 
在 上 面 的 代码 中 ，p 标签 就 是 一 个 静态 节点 ， 它 没有 使 用 任何 变量 ， 所 以 一 旦 首次 演 染 完毕 后 ， 


无 论 状 态 怎 么 变 ， 这 个 节点 都 不 需要 重新 泻 染 。 

当 AST 中 的 静态 子 树 被 打上 标记 后 ， 每 次 重新 泻 染 时 ， 就 不 需要 为 打上 标记 的 静态 节点 创 
建新 的 虚拟 节点 ， 而 是 直接 克隆 已 存在 的 虚拟 节点 。 在 虚拟 DOM 的 更 新 操作 中 ， 如 果 发 现 两 个 
节点 是 同一 个 节点 , 正常 情况 下 会 对 这 两 个 节点 进行 更 新 , 但 是 如 果 这 两 个 节点 是 静态 节点 ， 则 
可 以 直接 跳 过 更 新 节点 的 流程 。 更 多 内 容 可 以 参见 7.4.1 节 。 

总 体 来 说 ， 优 化 器 的 主要 作用 是 避免 一 些 无 用 功 来 提升 性 能 。 因 为 静态 节点 除了 首次 泻 染 ， 
后 续 不 需要 任何 重新 泻 染 操 作 。 


8.2.3 代码 生成 器 

代码 生成 器 是 模板 编译 的 最 后 一 步 ， 它 的 作用 是 将 AST 转换 成 泻 染 函 数 中 的 内 容 ， 这 个 内 
容 可 以 称 为 “代码 字符 串 ”。 

例如 ， 一 个 简单 的 模板 : 

61 «<p title="Berwin" @click="c">1</p> 
生成 后 的 代码 字符 串 是 : 


61 “with(this){return _c('p',{attrs:{"title":"Berwin"},on:{"click":c}},[_v("1")])} 


格式 化 后 是 : 

61 with(this){ 

682 return _c( 

@3 'p', 

64 { 

85 attrs:{"title":"Berwin"}, 
66 on:{"click":c} 

87 和 

88 [_v("1")] 

69 ) 
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这 样 一 个 代码 字符 串 最 终 导 出 到 外 界 使 用 时 ,会 将 代码 字符 串 放 到 函数 里 ,这 个 函数 叫 作 演 
染 丽 数 。 

当 演 染 函数 被 导出 到 外 界 后 ， 模 板 编 译 的 任务 就 完成 了 。 

那么 ， 如 何 将 代码 字符 串 放 到 函数 里 ? 

举 个 例子 ; 


81 const code = ‘with(this){return 'Hello Berwin'} 
62 const hello = new Function(code) 


64 hello() 
e5 // "Hello Berwin" 


前 面 介绍 过 ， 演 染 函 数 的 作用 是 创建 vnode。 泻 染 函 数 之 所 以 可 以 生成 vnode， 是 因为 代码 
字符 串 中 会 有 很 多 函数 调用 ( 例如， 上面 生 成 的 代码 字符 叮 中 有 两 个 函数 调用 _c 和 _v )， 这些 
函数 是 虚拟 DOM 提供 的 创建 vnode 的 方法 。vnode 有 很 多 种 类 型 ， 不 同 的 类 型 对 应 不 同 的 创建 
方法 , 所 以 代码 字符 串 中 的 _c 和 _v 其 实 都 是 创建 vnode 的 方法 , 只 是 创建 的 vnode 的 类 型 不 同 。 
例如 ，_c 可 以 创建 元 素 类 型 的 vnode， 而 _v 可 以 创建 文本 类 型 的 vnode。 


8.3 总 结 


本 章 中 , 我 们 主要 对 模板 编译 做 了 一 个 整体 介绍 。 首 先 介绍 了 模板 编译 在 整个 演 染 流程 中 的 
位 置 ， 然 后 介绍 了 什么 是 模板 编译 ， 最 后 介绍 了 如 何 将 模板 编译 成 浑 染 函数 。 

而 将 模板 编译 成 泻 染 函数 有 三 部 分 内 容 : 先 将 模板 解析 成 AST， 然 后 遍历 AST 标记 静态 节 
点 ， 最 后 使 用 AST 生成 代码 字符 串 。 这 三 部 分 内 容 分 别 对 应 三 个 模块 : 解析 器 、 优 化 器 和 代码 
生成 锅 。 
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解 析 多 


通过 第 8 章 的 学 习 , 我 们 知道 解析 器 在 整个 模板 编译 中 的 位 置 。 我 们 只 有 将 模板 解析 成 AST 
后 ,才能 基于 AST 做 优化 或 者 生成 代码 字符 串 ， 那 么 解析 器 是 如 何 将 模板 解析 成 AST 的 呢 ? 
本 章 中 ， 我 们 将 详细 介绍 解析 器 内 部 的 运行 原理 。 
9.1 解析 器 的 作用 
解析 需要 实现 的 功能 是 将 模板 解析 成 AST。 


例如 : 

61 <div> 

62 <p>{{name}}</p> 

63 </div> 

上 面 的 代码 是 一 个 比较 简单 的 模板 ， 它 转换 成 AST 后 的 样子 如 下 : 
el { 

62 tag: "div" 

63 type: 1， 

04 staticRoot: false， 

85 static: false， 

86 plain: true， 

87 parent: undefined， 

88 attrsList: []， 

69 attrsMap: {}, 

16 children: [ 

11 { 

12 tag: "p" 

13 type: 1， 

14 staticRoot: false, 
15 static: false, 

16 plain: true, 

17 parent: {tag: "div", ...}, 
18 attrsList: []， 

19 attrsMap: {}, 

26 children: [{ 

21 type: 2， 


py text: "{{name}}", 


23 static: false， 
24 expression: "_s(name)" 


25 }] 
26 } 

27 ] 

28 } 


其 实 AST 并 不 是 什么 很 神奇 的 东西 , 不 要 被 它 的 名 字 吓 倒 。 它 只 是 用 JavaScript 中 的 对 象 来 
描述 一 个 节点 ， 一 个 对 象 表示 一 个 节点 ， 对 象 中 的 属性 用 来 保存 节点 所 需 的 各 种 数据 。 比 如 ， 
parent 属 | 和 保存 了 父 节点 的 描述 对 象 ，children 属性 是 一 个 数组 ， 里 面 保存 了 一 些 子 节 点 的 描 
述 对 象 。 再 比如 ，type 属性 表示 一 个 节点 的 类 型 等 。 当 很 多 个 独立 的 节点 通过 parent 属性 和 
children 属性 连 在 一 起 时 ， 就 变 成 了 一 个 树 ， 而 这 样 一 个 用 对 象 描述 的 节点 树 其 实 就 是 AST。 
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事实 上 ， 解 析 需 内 部 也 分 了 好 几 个 子 解析 器 ， 比 如 HTML 解析 器 、 文 本 解析 需 以 及 过 滤 央 
解析 器， 其 中 最 主要 的 是 HTML 解析 需 。 顾 名 思 义 ，HITML 解析 需 的 作用 是 解析 HTML， 它 在 
解析 HTML 的 过 程 中 会 不 断 触发 各 种 钩子 函数 这 些 钧 子 羡 数 包括 开始 标签 钧 子 国 数 、 结 束 标 
签 钩子 函数 、 文 本 钩子 函数 以 及 注释 钩子 冰 数 。 


伪 代 码 如 下 : 

861 parseHTML(template, { 

62 start (tag, attrs, unary) { 

63 // 每 当 解 析 到 标签 的 开始 位 置 时 ， 触 发 该 函数 
04 

65 end () { 

66 // 每 当 解 析 到 标签 的 结束 位 置 时 ， 和 触发 该 函数 
67 }， 

68 chars (text) { 

69 // 每 当 解 析 到 文本 时 ， 和 触发 该 函数 

10 }), 

了 comment (text) { 

12 // 每 当 解 析 到 注释 时 ， 触 发 该 函数 

13 } 

14 }) 


你 可 能 不 能 很 清晰 地 理解 ， 下 面 我 们 举 个 简单 的 例子 : 
61 xdiv><p> 我 是 Berwin</p></div> 


当 上 面 这 个 模板 被 HTML 解析 器 解析 时 , 所 触发 的 钩子 函数 依次 是 : start、start、chars、 
end 和 end。 


也 就 是 说 , 解析 器 其 实 是 从 前 癌 后 解析 的 。 解析 到 <div> 时 , 会 触发 一 个 标签 开始 的 钧 子 函 
数 start; 然后 解析 到 <p> 时 ， 又 触发 一 次 钧 子 函数 start; 接着 解析 到 我 是 Berwin 这 行文 本 ， 
此 时 触发 了 文本 钩子 函数 chars; 然后 解析 到 </p>， 触 发 了 标签 结束 的 钩子 函数 end; 接着 继续 
解析 到 </div>， 此 时 又 触发 一 次 标签 结束 的 钩子 函数 end， 解析 结 束 。 
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因此 ， 我 们 可 以 在 钩子 函数 中 构建 AST 节点 。 在 start 钧 子 函 数 中 构建 
在 chars 钩子 函数 中 构建 文本 类 型 的 节点 ， 在 comment 钧 子 函 数 中 构建 注释 类 型 的 节点 。 


当 HTML 解析 器 不 再 触发 钩子 函数 时 ， 就 说 明 所 有 模板 都 解析 完毕 ， 所 有 类 型 的 节点 都 在 
钩子 函数 中 构建 完成 ， 即 AST 构建 完成 。 

我 们 发 现 ， 钩 子 函 数 start 有 三 个 参数 ， 分 别 是 tag 、attrs 和 unary， 它 们 分 别 说 明 标 签 
名 、 标 签 的 属性 以 及 是 否 是 自 闭合 标签 。 

而 文本 节点 的 钩子 函数 chars 和 注释 节点 的 钧 子 函 数 comment 都 只 有 一 个 参数 ,只 有 text。 
这 是 因为 构建 元 素 节 点 时 需要 知道 标签 名 、 属 性 和 自 闭合 标识 , 而 构建 注释 节点 和 文本 节点 时 只 
需要 知道 文本 即 可 。 

什么 是 自 闭合 标签 ” 举 个 简单 的 例子 , input 标签 就 属于 自 闭合 标签 : <input type="text" />， 
而 div 标签 就 不 属于 自 闭合 标签 : <div></div>。 

在 start 钩子 函数 中 ,我 们 可 以 使 用 这 三 个 参数 来 构建 一 个 元 素 类 型 的 AST 节点 ， 例 如: 


61 function createASTElement (tag, attrs, parent) { 


02 return { 

63 type: 1， 

64 tag， 

85 attrsList: attrs， 

866 parent, 

87 children: [] 

08 } 

69 } 

16 

11 parseHTML(template, { 

12 start (tag, attrs, unary) { 
13 let element = createASTElement(tag, attrs, currentparent) 
14 } 

15 }) 


在 上 面 的 代码 中 ， 我 们 在 钧 子 函 数 start 中 构建 了 一 个 元 素 类 型 的 AST 节点 。 
如 果 是 触发 了 文本 的 钩子 函数 ， 就 使 用 参数 中 的 文本 构建 一 个 文本 类 型 的 AST 节 点， 例如 : 


61 “parseHTML(template，1{ 


82 chars (text) { 

83 let element = {type: 3, text} 
64 } 

65 }) 


如 果 是 注释 ， 就 构建 一 个 注释 类 型 的 AST 节点 ， 例 如: 


61 parseHTML(template, { 


02 comment (text) { 
@3 let element = {type: 3, text, isComment: true} 
64 } 


e5 }) 
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你 会 发 现 ，9.1 节 中 看 到 的 AST 是 有 层级 关系 的 ， 一 个 AST 节点 具有 父 节点 和 子 节 点 , 但 
是 9.2 节 中 介绍 的 创建 节点 的 方式 ， 节 点 是 被 拉平 的 , 没有 层级 关系 。 因 此 , 我 们 需要 一 套 逻 辑 
来 实现 层级 关系 , 让 每 一 个 AST 节点 都 能 找到 它 的 父 级 。 下 面 我 们 介绍 一 下 如 何 构建 AST 层级 
关系 。 

构建 AST 层级 关系 其 实 非 常 简单 ， 我 们 只 需要 维护 一 个 栈 (stack ) 即 可 ， 用 栈 来 记录 层级 
关系 ， 这 个 层级 关系 也 可 以 理解 为 DOM 的 深度 。 

HTML 解析 需 在 解析 HIML 时 , 是 从 前 向 后 解析 。 每 当 遇 到 开始 标签 ,就 触发 钧 子 限 数 start。 
每 当 遇 到 结束 标签 ， 就 会 触发 钩子 函数 end。 

基于 HTML 解析 器 的 逻辑 ， 我 们 可 以 在 每 次 触发 钩子 函数 start 时 ， 把 当前 构建 的 节点 推 
入 栈 中 ; 每 当 触发 钩子 函数 end 时， 就 从 栈 中 弹出 一 个 节点 。 

这 样 就 可 以 保证 每 当 触 发 钩子 函数 start 时 , 栈 的 最 后 一 个 节点 就 是 当前 正在 构建 的 节点 的 
父 节 点 ， 如 图 9-1 所 示 。 


根 节点 
推 人 
div | p span 
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图 9-1 使 用 栈 记 录 DOM 层级 关系 
下 面 我 们 用 一 个 具体 的 例子 来 描述 如 何 从 0 到 1 构建 一 个 带 层级 关系 的 AST。 
假设 有 这 样 一 个 模板 : 
61 <xdiv> 
02 <h1> 我 是 Berwin</h1> 


03 <p> 我 今年 23 岁 </p> 
94 </div> 


上 面 这 个 模板 被 解析 成 AST 的 过 程 如 图 9-2 所 示 。 


9.2 解析 器 内 部 运行 原理 
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模板 AST 
<div> 
<h1> 我 是 Berwin</h1> 


《p> 我 今年 23 岁 </p> 
</div> 


<h1> 我 是 Berwin</h1> 
<p> 我 今年 23 岁 </p> 
</div> 


<h1> 我 是 Berwin</Vh1> 
<p> 我 今年 23 安 </p> 
</div> 


我 是 Berwin</h1> 


<p> 我 今年 23 岁 </p> 
</div> 


</h1> 
<p> 我 今年 23 岁 </p> 
</div> 


</div> 


<p> 我 今年 23 岁 </p> 
</div> 


图 9-2 构建 AST 的 过 程 
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图 9-2 ( 续 ) 

9-2 给 出 了 构建 AST 的 过 程 ， 图 中 的 黑 底 白 数字 表示 解析 的 步 又 ， 具 体 如 下 。 

@ 模板 的 开始 位 置 是 div 的 开始 标签 ， 于 是 会 触发 钩子 函数 start。start 触发 后 ， 会 先 
构建 一 个 div 节点 。 此 时 发 现 栈 是 空 的 ， 这 说 明 div 节点 是 根 节 点 ， 因 为 它 没有 父 节 点 。 最 后 ， 
将 div 节点 推 人 栈 中 ， 并 将 模板 字符 串 中 的 div 开始 标签 从 模板 中 截取 掉 。 

@ 这 时 模板 的 开始 位 置 是 一 些 空格 ， 这 些 空格 会 触发 文本 节点 的 钧 子 函 数 ， 在 钩子 函数 里 
会 忽略 这 些 空格 。 同 时 会 在 模板 中 将 这 些 空格 截取 掉 。 
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全 这 时 模板 的 开始 位 置 是 hl 的 开始 标签 ， 于 是 会 触发 钧 子 函数 start。 与 前 面 流程 一 样 ， 
start 触发 后 , 会 先 构 建 一 个 hl 节点 。 此 时 发 现 栈 的 最 后 一 个 节点 是 div 节点 , 这 说 明 hl 节点 
的 父 节 点 是 div， 于 是 将 h1 添加 到 div 的 子 节点 中 , 并 且 将 hi 节点 推 人 栈 中 ,同时 从 模板 中 将 
hl 的 开始 标签 截取 掉 。 


人 @ 这 时 模板 的 开始 位 置 是 一 段 文本 ,于 是 会 触发 钩子 丽 数 chars。chars 触发 后 ,会 先 构建 
一 个 文本 节点 ， 此 时 发 现 栈 中 的 最 后 一 个 节点 是 hl， 这 说 明文 本 节点 的 父 节点 是 hl ， 于 是 将 文 
本 节点 添加 到 hl 节点 的 子 节点 中 。 由 于 文本 节点 没有 子 节点 ， 所 以 文本 节点 不 会 被 推 人 栈 中 。 
最 后 ， 将 文本 从 模板 中 截取 掉 。 

@@ 这 时 模板 的 开始 位 置 是 hl 结束 标签 ， 于 是 会 触发 钩子 函数 end。end 触发 后 ， 会 把 栈 中 
最 后 一 个 节点 弹出 来 。 

@ 与 第 @ 步 一 样 ,这 时 模板 的 开始 位 置 是 一 些 空格 ,这 些 空格 会 触发 文本 节点 的 钩子 函数 ， 
在 钩子 函数 里 会 忽略 这 些 空格 。 同 时 会 在 模板 中 将 这 些 空格 截取 掉 。 


@@ 这 时 模板 的 开始 位 置 是 p 开始 标签 ， 于 是 会 触发 钩子 函数 start。start 触发 后 ， 会 先 
构建 一 个 p 节 点 ,由 于 第 全 步 已 经 从 栈 中 弹出 了 一 个 节点 ,所 以 此 时 栈 中 的 最 后 一 个 节点 是 div， 
这 说 明 p 节点 的 父 节点 是 div。 于 是 将 p 推 入 div 的 子 节 点 中 , 最 后 将 p 推 人 到 栈 中 , 并 将 p 的 
开始 标签 从 模板 中 截取 掉 。 


@@ 这 时 模板 的 开始 位 置 又 是 一 段 文 本 ， 于 是 会 触发 钩子 函数 chars。 当 chars 触发 后 ,会 
先 构建 一 个 文本 节点 ， 此 时 发 现 栈 中 的 最 后 一 个 节点 是 p 节点 ， 这 说 明文 本 节点 的 父 节 点 是 p 
节点 。 于 是 将 文本 节点 推 人 p 节点 的 子 节 点 中 ， 并 将 文本 从 模板 中 截取 掉 。 

@@ 这 时 模板 的 开始 位 置 是 p 的 结束 标签 ， 于 是 会 触发 钩子 函数 end。 当 end 触发 后 ， 会 从 
栈 中 弹出 一 个 节点 出 来 ， 也 就 是 把 p 标签 从 栈 中 弹出 来 ， 并 将 p 的 结束 标签 从 模板 中 截取 掉 。 

D 与 第 @ 步 和 第 @ 步 一 样 , 这 时 模板 的 开始 位 置 是 一 些 空格 ， 这 些 空格 会 触发 文本 节点 
的 钩子 函数 并 且 在 钩子 函数 里 会 忽略 这 些 空格 。 同 时 会 在 模板 中 将 这 些 空格 截取 掉 。 

@ 这 时 模板 的 开始 位 置 是 div 的 结束 标签 ， 于 是 会 触发 钩子 函数 end。 其 逻辑 与 之 前 一 样 ， 
把 栈 中 的 最 后 一 个 节点 弹出 来 ， 也 就 是 把 div 弹 了 出 来 ， 并 将 div 的 结束 标签 从 模板 中 截取 掉 。 

@ 这 时 模板 已 3 了， 也 就 说 明 HTML 解析 器 已 经 运行 完毕 。 这 时 我 们 会 发 现 栈 已 
经 空 了 ,但 是 我 们 得 到 了 一 个 完整 的 带 层级 关系 的 AST 语法 树 。 这 个 AST 中 清晰 写 明 了 每 个 节 
点 的 父 厄 点 、 子 太 点 及 其 三 点 闫 型。 


9.3 HTML 解析 器 


通过 前 面 的 介绍 ， 我 们 发 现 构建 AST 非常 依赖 HTML 解析 器 所 执行 的 钩子 函数 以 及 钧 子 函 
数 中 所 提供 的 参数 ， 你 一 定 会 非 常 好 奇 HTML 解析 器 是 如 何 解析 模板 的 ， 接 下 来 我 们 会 详细 介 
绍 HTML 解析 需 的 运行 原理 。 
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9.3.1 运行 原理 

事实 上 ， 解 析 HTML 模板 的 过 程 就 是 循环 的 过 程 ， 简 单 来 说 就 是 用 HTML 模板 字符 串 来 循 
环 ， 每 轮 循环 都 从 HTML 模板 中 截取 一 小 段 字符 串 ， 然 后 重复 以 上 过 程 ， 直 到 HTML 模板 被 截 
成 一 个 空 字符 串 时 结束 循环 ， 解 析 完 毕 ， 如 图 9-2 所 示 。 

在 截取 一 小 段 字 符 串 时 ， 有 可 能 截取 到 开始 标签 ,也 有 可 能 截取 到 结束 标签 ， 又 或 者 是 文本 
或 者 注释 ， 我 们 可 以 根据 截取 的 字符 串 的 类 型 来 触发 不 同 的 钧 子 函数 。 

循环 HTML 模板 的 伪 代 码 如 下 : 


91 function parseHTML(html, options) { 
02 while (html) { 


63 // 截取 模板 字符 串 并 触发 钓 子 函 数 
84 } 
e5 } 


为 了 方便 理解 , 我 们 手动 模拟 HTML 解析 器 的 解析 过 程 。 例如 ,下面 这 样 一 个 简单 的 HTML 
模板 : 


el <xdiv> 
82 <p>{{name}}</p> 
@3 </div> 


它 在 被 HTML 解析 器 解析 的 过 程 如 下 。 
最 初 的 HTML 模板 : 


el 《<div> 

82 <p>{{name}}</p> 

63 </div>. 

第 一 轮 循 环 时 ， 截 取出 一 段 字符 串 <div>， 并 且 触 发 钩子 函数 start， 截 取 后 的 结果 为 : 
91 和 

62 <p>{{name}}</p> 

63 </div>. 

第 二 轮 循 环 时 ， 截 取出 一 段 字符 串 : 

91 

02 


并 且 触 发 钧 子 男 数 chars， 截 取 后 的 结果 为 : 


61 ~<p>{{name}}</p> 
62 </div>. 


第 三 轮 循环 时 ， 截 取出 一 段 字 符 串 <p>， 并 且 触 发 钩子 函数 start， 截 取 后 的 结果 为 : 


el “~{{name}}</p> 
62 </div>. 


第 四 轮 循 环 时 ， 截 取出 一 段 字符 串 {{name}}， 并 且 触 发 多 子 函数 chars， 截 取 后 的 结果 为 : 


9.3 HTML 解析 器 101 


el “</p> 

92 </div>. 

第 五 轮 循环 时 ， 截 取出 一 段 字符 串 </p>， 并 且 触 发 钩子 函数 end， 截 取 后 的 结果 为 : 
91 

92  《“/div> 

第 六 轮 循环 时 ， 截 取出 一 段 字 符 串 : 

91 

02 


并 且 触 发 钩子 函数 chars， 和 截取 后 的 结果 为 : 

61 “<V/div> 

第 七 轮 循环 时 ， 和 截取 出 一 段 字 符 串 </div>， 并 且 触 发 钩子 函数 end， 和 截取 后 的 结果 为 : 

DT eS 

解析 完毕 。 
HTML 解析 器 的 全 部 逻辑 都 是 在 循环 中 执行 , 循环 结束 就 说 明 解 析 结 束 。 接 下 来 , 我 们 要 讨 

论 的 重点 是 HTML 解析 器 在 循环 中 都 干 了 些 什 么 事 。 
你 会 发 现 HTML 解析 器 可 以 很 聪明 地 知道 它 在 每 一 轮 循环 中 应 该 截取 哪些 字符 串 ， 那 么 它 


是 如 何 做 到 这 一 点 的 呢 ? 
通过 前 面 的 例子 ,我 们 发 现 一 个 很 有 趣 的 事 ,， 那 就 是 每 一 轮 截取 字符 串 时 ， 都 是 在 整个 模板 9 
的 开始 位 置 截取 。 我 们 根据 模板 开始 位 置 的 片段 类 型 ， 进 行 不 同 的 截取 操作 。 
例如 ， 上 面 例子 中 的 第 一 轮 循 环 : 如 果 是 以 开始 标签 开头 的 模板 ， 就 把 开始 标签 截取 掉 。 
再 例如 ， 上 面 例子 中 的 第 四 轮 循 环 : 如果 是 以 文本 开始 的 模板 ， 就 把 文本 截取 掉 。 
这 些 被 截取 的 片段 分 很 多 种 类 型 ， 示 例如 下 。 
口 开始 标签 ， 例 如 <div>。 
口 结束 标签 ， 例 如 </div>。 
口 HTML 注释 ， 例 如 <!-- 我 是 注释 -->。 
口 DOCTYPE,， 例如 <!1DOCTYPE html>。 
口 条 件 注释 ， 例 如 <!--[if !IE]>--> 我 是 注释 <1--<!l[endif]-->。 
口 文本 ， 例 如 我 是 Berwin。 
通常 ， 最 常见 的 是 开始 标签 、 结 束 标签 、 文 本 以 及 注释 。 


9.3.2 截取 开始 标签 


上 一 节 中 我 们 说 过 ， 每 一 轮 循环 都 是 从 模板 的 最 前 面 截取 ， 所 以 只 有 模板 以 开始 标签 开头 ， 
才 需 要 进行 开始 标签 的 截取 操作 。 
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那么 ， 如 何 确定 模板 是 不 是 以 开始 标签 开头 ? 

在 HIML 解析 器 中 ， 想 分 辨 出 模板 是 否 以 开始 标签 开头 并 不 难 ， 我 们 需要 先 判断 HTML 模 
板 是 不 是 以 < 开头 。 

如 果 HTML 模板 的 第 一 个 字符 不 是 <, 那么 它 一 定 不 是 以 开始 标签 开头 的 模板 , 所 以 不 需要 
进行 开始 标签 的 截取 操作 。 

如 果 HTML 模板 以 < 开头 ， 那 么 说 明 它 至 少 是 一 个 以 标签 开头 的 模板 ， 但 这 个 标签 到 底 是 
什么 类 型 的 标签 ， 还 需要 进一步 确认 。 

如 果 模 板 以 < 开头 , 那么 它 有 可 能 是 以 开始 标签 开头 的 模板 ,同时 它 也 有 可 能 是 以 结束 标签 
开头 的 模板 ， 还 有 可 能 是 注释 等 其 他 标签 ， 因 为 这 些 类 型 的 片段 都 以 < 开头 。 那 么 ， 要 进一步 确 
定 模 板 是 不 是 以 开始 标签 开头 , 还 需要 借助 正则 表达 式 来 分 辨 模板 的 开始 位 置 是 否 符合 开始 标签 


4 


那么 ， 如 何 使 用 正则 表达 式 来 匹配 模板 以 开始 标签 开头 ?我 们 看 下 面 的 代码 : 


@1 const ncname = '[a-zA-Z_][\\Ww\\-\\.]*" 
62 const qnameCapture = `((?:${ncname}\\:)?${ncname}). 
63 const startTagOpen = new RegExp( ^<${qnameCapture} ) 


85 // 以 开始 标签 开始 的 模板 
66 "<div></div>' .match(startTagOpen) // ["<div", "div", index: 96，input: "<div></div>"] 


68 // 以 结束 标签 开始 的 模板 
69 '</div><div3 我 是 Berwin</div>'.match(startTagOpen) // null 


11 // 以 文本 开始 的 模板 
12 ' 我 是 Berwin</p>'.match(startTagOpen) // null 


通过 上 面 的 例子 可 以 看 到 ， 只 有 '<div></div>' 可 以 成 功 匹配 ， 而 以 </divy 开头 的 或 者 以 
文本 开头 的 模板 都 无 法 成 功 匹 配 。 

在 9.2 节 中 ,我 们 介绍 了 当 HTML 解析 器 解析 到 标签 开始 时 ， 会 触发 钩子 函数 start， 同 时 
会 给 出 三 个 参数 ， 分 别 是 标签 名 (tagName )、 属 性 (attrs ) 以 及 自 闭合 标识 (unary )。 

因此 ， 在 分 辨 出 模板 以 开始 标签 开始 之 后 ， 需 要 将 标签 名 、 属 性 以 及 自 闭 合 标识 解析 出 来 。 

在 分 辨 出 模板 以 开始 标签 开始 之 后 , 就 可 以 得 到 标签 名 , 而 属性 和 自 闭 合 标 识 则 需要 进一步 
解析 。 

当 完 成 上 面 的 解析 后 ， 我 们 可 以 得 到 这 样 一 个 数据 结构 ; 


61 const start = '<div></div>'.match(startTagOpen) 
62 if (start) { 


03 const match = { 

84 tagName: start[1], 
65 attrs: [] 

66 } 


67 } 
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这 里 有 一 个 细 闻 很 重要 : 在 前 面 的 例子 中 ， 我 们 匹配 到 的 开始 标签 并 不 全 。 例 如 : 


61 const ncname = '[a-zA-Z_][\\W\\-\\.]*" 
92 const qnameCapture = `((?:${ncname}\\:)?${ncname}). 
863 const startTagOpen = new RegExp( ^<${qnameCapture} ) 


65 "<div></div>' .match(startTagOpen) 
e6 // ["<div", "div", index: 6，input: "<div></div>"] 


@8 '<p></p>' .match(startTagOpen) 
69 // ["<p", "p", index: 6, input: "<p></p>"] 


11 "<div class="box"></div>'.match(startTagOpen) 
12 // ["<div"，"div"，index: 86, input: "<div class="box"></div>"] 


可 以 看 出 , 上 面 这 个 正则 表达 式 虽然 可 以 分 辨 出 模板 是 否 以 开始 标签 开头 , 但 是 它 的 匹配 规 
则 并 不 是 匹配 整个 开始 标签 ， 而 是 开始 标签 的 一 小 部 分 。 


事实 上 ， 开 始 标签 被 拆 分 成 三 个 小 部 分 分别 是 标签 名 、 属 性 和 结尾 ， 如 图 9-3 所 示 。 


开始 标签 
<div class="box" > </div> 
标签 名 属性 结尾 


图 9-3 ”开始 标签 被 拆 分 成 三 个 小 部 分 
通过 “标签 名 ”这 一 段 字 符 ， 就 可 以 分 辨 出 模板 是 否 以 开始 标签 开头 ， 此 后 要 想得到 属 4 
自 闭合 标识 ， 则 需要 进一步 解析 。 

1. 解析 标签 属性 

在 分 辨 出 模板 以 开始 标签 开头 之 后 , 会 将 开始 标签 中 的 标签 名 这 一 小 部 分 截取 掉 ,， 因此 在 解 
析 标 签 属性 时 ， 我 们 得 到 的 模板 是 下 面 伪 代 码 中 的 样子 : 

91 " class="box"></div>' 
通常 , 标签 属性 是 可 选 的 , 一 个 标签 的 属性 有 可 能 存在 ,也 有 可 能 不 存在 ， 所 以 需要 判断 标 
签 是 否 存在 属性 ， 如 果 存 在 ， 对 它 进行 截取 。 

下 面 的 伪 代 码 展示 了 如 何 解 析 开 始 标 签 中 的 属性 ， 但 是 它 只 能 解析 一 个 属性 : 

"CI" "+ CE]*) + 


三 
al 


861 const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?: 
|([I^\s"'=<> ]+)))?/ 

682 let html = ' class="box"></div>"' 

63 let attr = html.match(attribute) 

64 html = html.substring(attr[8].length) 

65 console.log(attr) 

66 // [' class="box"', 'class', '=', 'box', undefined, undefined, index: 8, input: ' 
class="box"></div>'] 


如 果 标 签 上 有 很 多 属性 , 那么 上 面 的 处 理 方式 就 不 足以 支撑 解析 任务 的 正常 运行 。 例 如 下 面 
的 代码 : 
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861 const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+| "(~']*)'+ 
|([^\s ”=<> ]+)))?/ 
62 let html = ' class="box" id="el"></div> 
63 let attr = html.match(attribute) 
64 html = html.substring(attr[8].length) 
65 console.log(attr) 
66 // [' class="box"', 'class', '=', 'box', undefined, undefined, index: 8, input: ' 


class="box" id="el"></div>'] 


可 以 看 到 ， 这 里 只 解析 出 了 class 属性 ， 而 id 属性 没有 解析 出 来 。 
此 时 剩余 的 HTML 模板 是 这 样 的 : 


61 


所 以 


" id="el"></div>" 


属性 也 可 以 分 成 多 个 小 部 分 ， 一 小 部 分 一 小 部 分 去 解析 与 截取 。 


解决 这 个 问题 时 ,我 们 只 需要 每 解析 一 个 属性 就 截取 一 个 属性 ,如 果 截 取 完 后 , 剩 下 的 HTML 
模板 依然 符合 标签 属性 的 正则 表达 式 , 那么 说 明 还 有 剩余 的 属性 需要 处 理 , 此 时 就 重复 执行 前 面 
的 流程 ， 直 到 剩余 的 模板 不 存在 属性 ， 也 就 是 剩余 的 模板 不 存在 符合 正则 表达 式 所 预 设 的 规则 。 


例如 


const startTagClose = /ANS#(N\/?)>/ 

const attribute = 
/~*\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(3:" (EN"]*)"+| ([^]*) +| (Ls"'=<> ]+)))?/ 
let html = ' class="box" id="el"></div>"' 

let end, attr 

const match = {tagName: 'div', attrs: []} 


while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { 
html = html.substring(attr[8].length) 
match.attrs.push(attr) 


} 


上 面 这 段 代码 的 意思 是 ， 如 果 剩余 HTML 模板 不 符合 开始 标签 结尾 部 分 的 特征 ， 并 且 符合 
标签 属性 的 特征 ， 那 么 进入 到 循环 中 进行 解析 与 截取 操作 。 


通过 match 方法 解析 出 的 结果 为 : 


{ 
tagName: 'div', 
attrs: [ 
[' class="box"', 'class', '=', 'box', null, nulll], 
[" id="el"', "id','=", 'el', null, null] 
] 
} 


可 以 看 到 ， 标 签 中 的 两 个 属性 都 已 经 解析 好 并 且 保存 在 了 attrs 中 。 
此 时 剩余 模板 是 下 面 的 样子 : 


61 


"></div>" 


我 们 将 属性 解析 后 的 模板 与 解析 之 前 的 模板 进行 对 比 : 
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61  // 解析 前 的 模板 
62 " class="box" id="el"></div>" 


64  // 解析 后 的 模板 
@5 '></div>" 


66 

87 // 解析 前 的 数据 

68  { 

89 tagName: "div '， 

16 attrs: [] 

1 了 站 

12 

13  // 解析 后 的 数据 

14 { 

15 tagName: 'div', 

16 attrs: [ 

17 [" class="box"', 'class', '=', 'box', null, nulll], 
18 [" id="el"', "id','='", "el'’, null, nulll] 
19 ] 

20 } 


可 以 看 到 ， 标 签 上 的 所 有 属性 都 已 经 被 成 功 解析 出 来 ， 并 保存 在 attrs 属性 中 。 
2. 解析 自 闭 合 标识 

如 果 我 们 接着 上 面 的 例子 继续 解析 的 话 ， 目 前 剩余 的 模板 是 下 面 这 样 的 : 

61 '></div>" 

开始 标签 中 结尾 部 分 解析 的 主要 目的 是 解析 出 当前 这 个 标签 是 否 是 自 闭 合 标签 。 
举 个 例子 : 

el <div></div> 


这 样 的 div 标签 就 不 是 自 闭 合 标签 ， 而 下 面 这 样 的 input 标签 就 属于 自 闭 合 标签 : 
61 <input type="text" /> 


自 闭合 标签 是 没有 子 节点 的 ， 所 以 前 文中 我 们 提 到 构建 AST 层级 时 ， 需 要 维护 一 个 栈 ， 而 
一 个 节点 是 否 需要 推 人 到 栈 中 ， 可 以 使 用 这 个 自 闭合 标识 来 判断 。 


那么 ， 如 何 解析 开始 标签 中 的 结尾 部 分 呢 ? 看 下 面 这 段 代 码 : 


61 function parseStartTagEnd (html) { 


62 const startTagClose = /^\s*(\/?)>/ 

83 const end = html.match(startTagClose) 
84 const match = {} 

85 

66 if (end) { 

87 match.unarySlash = end[1] 

88 html = html.substring(end[8].1length) 
69 return match 

16 } 

11 } 
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13 console.log(parseStartTagEnd('></div>')) // {unarySlash: ""} 
14 console.log(parseStartTagEnd('/><div></div>')) // {unarySlash: "/"} 


这 段 代 码 可 以 正确 解析 出 开始 标签 是 否 是 自 闭 合 标签 。 


从 代码 中 打印 出 来 的 结果 可 以 看 到 ， 自 闭合 标签 解析 后 的 unaryslash 属性 为 /， 而 非 自 闭 


合 标签 为 空 字符 串 。 


3. 实现 源码 


前 面 解析 开始 标签 时 ,我 们 将 其 拆 解 成 了 三 个 部 分 , 分 别 是 标签 名 、 属 性 和 结尾 。 我 相信 你 
已 经 对 开始 标签 的 解析 有 了 一 个 清晰 的 认识 ， 接 下 来 看 一 下 Vue.jjs 中 真实 的 代码 是 什么 样 的 : 


81 const ncname = '[a-zA-Z_][\\Ww\\-\\.]*" 

62 const qnameCapture = `((?:${ncname}\\:)?${ncname}). 
63 const startTagOpen = new RegExp( ^<${qnameCapture} ) 
0@4 const startTagClose = /^\s*(\/?)>/ 


85 

66 function advance (n) { 

87 html = html.substring(n) 
e8 } 

89 


16 function parseStartTag () { 
11 // 解析 标签 名 ， 判 断 模板 是 否 符合 开始 标签 的 特征 


2 const start = html.match(startTagOpen) 
3 if (start) { 

14 const match = { 

15 tagName: start[1], 

16 attrs: [] 

17 

18 advance(start[8].1length) 

19 

26 // 解析 标签 属性 

21 let end, attr 

22 while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { 
23 advance(attr[86].length) 
24 match.attrs.push(attr) 

25 } 

26 

27 // 判断 该 标签 是 否 是 自 闭合 标签 
28 if (end) { 

29 match.unarySlash = end[1] 
36 advance(end[86].length) 

3 return match 

32 } 

33 } 

34 } 


上 面 的 代码 是 Vue.js 中 解析 开始 标签 的 源码 ， 这 段 代码 中 的 html 变量 是 HTML 模板 。 

调用 parsestartTag 就 可 以 将 剩余 模板 开始 部 分 的 开始 标签 解析 出 来 ,如 果 剩 余 HTML 模板 
的 开始 部 分 不 符合 开始 标签 的 正则 表达 式 规 则 ， 那 么 调用 parsestartTag 就 会 返回 undefined。 
因此 ， 判 断 剩余 模板 是 否 符 合 开始 标签 的 规则 ， 只 需要 调用 parsestartTag 即 可 。 如 果 调 用 它 
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后 得 到 了 解析 结果 , 那么 说 明 剩余 模板 的 开始 部 分 符合 开始 标签 的 规则 ,此 时 将 解析 出 来 的 结果 
取出 来 并 调用 钧 子 函 数 start 即 可 : 


61  // 开始 标签 
62 const startTagMatch = parseStartTag() 
63 if (startTagMatch) { 


84 handleSstartTag(startTagMatch ) 
85 continue 
06 } 


前 面 我 们 说 过 ， 所 有 解析 操作 都 运行 在 循环 中 ， 所 以 continue 的 意思 是 这 一 轮 的 解析 工作 
已 经 完成 ， 可 以 进行 下 一 轮 解析 工作 。 
从 代码 中 可 以 看 出 ， 如 果 调 用 parseSstartTag 之 后 有 返回 值 ， 那 么 会 进行 开始 标签 的 处 理 ， 
其 处 理 逻 辑 主 要 在 handlestartTag 中 。 这 个 函数 的 主要 目的 就 是 将 tagName 、attrs 和 unary 
等 数据 取出 来 ， 然后 调用 钧 子 函 数 将 这 些 数 据 放 到 参数 中 。 


9.3.3 ”截取 结束 标签 


结束 标签 的 截取 要 比 开始 标签 简单 得 多 ,因为 它 不 需要 解析 什么 , 只 需要 分 辨 出 当前 是 否 已 
经 截取 到 结束 标签 ， 如 果 是 ， 那 么 触发 钩子 函数 就 可 以 了 。 

那么 ， 如 何 分 辨 模板 已 经 截取 到 结束 标签 了 呢 ? 其 道理 其 实 和 开始 标签 的 截取 相同 。 

如 果 HTML 模板 的 第 一 个 字符 不 是 <, 那么 一 定 不 是 结束 标签 。 只 有 HTML 模板 的 第 一 个 字 
符 是 < 时 ， 我 们 才 需 要 进一步 确认 它 到 底 是 不 是 结束 标签 

进一步 确认 时 ， 我 们 只 需要 判断 剩余 HTML 模板 的 开始 位 置 是 否 符合 正则 表达 式 中 定义 的 
规则 即 可 : 


61 const ncname = '[a-zA-Z_][\\W\\-\\.]*" 
92 const qnameCapture = `((?:${ncname}\\:)?${ncname}). 
@3 const endTag = new RegExp( ^<\\/${qnameCapture}[^>]*> ) 


65 const endTagMatch = '</div>'.match(endTag) 
686 const endTagMatch2 = '<div>'.match(endTag) 


@8 console.log(endTagMatch) // ["</div>", "div", index: 8, input: "</div>"] 
69 console.log(endTagMatch2) // null 


上 面 代码 可 以 分 辨 出 剩余 模板 是 否 是 结束 标签 。 当 分 辨 出 结束 标签 后 , 需要 做 两 件 事 , 一 件 
事 是 截取 模板 ， 另 一 件 事 是 触发 钩子 函数 。 而 Vuejjs 中 相关 源码 被 精简 后 如 下 : 


61 const endTagMatch = html.match(endTag) 
92 if (endTagMatch) { 


83 html = html.substring(endTagMatch[6].1length) 
84 options.end(endTagMatch[1]) 

@5 continue 

06 } 


可 以 看 出 ， 先 对 模板 进行 截取 ， 然 后 触发 钩子 函数 。 
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9.3.4 截取 注释 


分 辨 模板 是 否 已 经 截取 到 注释 的 原理 与 开始 标签 和 结束 标签 相同 ， 先 判断 剩余 HTML 模板 
的 第 一 个 字符 是 不 是 <“， 如 果 是 ， 再 用 正则 表达 式 来 进一步 匹配 : 


61 const comment = /^x!--/ 


62 

63 if (comment.test(html)) { 

@4 const commentEnd = html.indexOof('-->') 
85 

66 if (commentEnd >= 6) { 

67 if (options.shouldKeepComment) { 

08 options.comment(html.substring(4, commentEnd)) 
69 } 

16 html = html.substring(commentEnd + 3) 
11 continue 

12 } 

13 } 


在 上 面 的 代码 中 ， 我 们 使 用 正则 表达 式 来 判断 剩余 的 模板 是 否 符合 注释 的 规则 ， 如 果 符 合 ， 


就 将 这 段 注 释文 本 截取 出 来 。 


这 里 有 一 个 有 意思 的 地 方 ， 那 就 是 注释 的 钩子 函数 可 以 通过 选项 来 配置 只 有 options . 
shouldKeepComment 为 真 时 ， 才 会 触发 钩子 函数 ， 否 则 只 截取 模板 ， 不 触发 钩子 函数 。 


9.3.5 ”截取 条 件 注释 


条 件 注释 不 需要 触发 钩子 函数 ， 我 们 只 需要 把 它 截 取 掉 就 行 了 。 


截取 条 件 注 释 的 原理 与 截取 注释 非常 相似 ， 如 果 模 板 的 第 一 个 字符 是 <“， 并 且 符 合 我 们 事先 
用 正则 表达 式 定义 好 的 规则 ， 就 说 明 需 要 进行 条 件 注释 的 截取 操作 。 


在 下 面 的 代码 中 , 我 们 通过 indexof 找到 条 件 注 
符 都 截取 掉 : 


61 const conditionalComment = /^x!\[/ 
62 if (conditionalComment.test(html)) { 


主 释 结 


03 const conditionalEnd = html.indexof(']>') 
64 

65 if (conditionalEnd >= 6) { 

66 html = html.substring(conditionalEnd + 2) 
67 continue 

68 } 

69 } 

我 们 来 举 个 例子 : 


61 const conditionalComment = /^x!\[/ 


62 let html = '<![if !IE]><link href="non-ie. 


63 if (conditionalComment.test(html)) { 
@4 const conditionalEnd = html.indexOof(']> 


css" 


咏 


束 位 置 的 下 标 , 然后 将 结束 位 置 前 的 字 


rel="stylesheet"><![endif]>" 
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65 if (conditionalEnd >= 86) { 

866 html = html.substring(conditionalEnd + 2) 
67 } 

68 } 

89 


16 console.log(html) // '<link href="non-ie.css" rel="stylesheet"><![endif]>" 
从 打印 结果 中 可 以 看 到 ，HTML 中 的 条 件 注释 部 分 被 截取 掉 了 。 
通过 这 个 逻辑 可 以 发 现 , 在 Vue.js 中 条 件 注释 其 实 没 有 用 ， 写 了 也 会 被 截取 掉 ， 通 俗 一 点 说 


就 是 写 了 也 白 写 。 


9.3.6 ”截取 DOCTYPE 


DOCTYPE 与 条 件 注释 相同 ， 都 是 不 需要 触发 钩子 函数 的 ， 只 需要 将 匹配 到 的 这 一 段 字 符 截 取 
掉 即 可 。 下 面 的 代码 将 DOCTYPE 这 段 字 符 匹 配 出 来 后 ,根据 它 的 length 属性 来 决定 要 截取 多 长 
的 字符 串 : 


61 const doctype = /^<!DOCTYPE [^>]+>/i 
92 const doctypeMatch = html.match(doctype) 
@3 if (doctypeMatch) { 


84 html = html.substring(doctypeMatch[8].length) 
@5 continue 

06 } 

示例 如 下 : 


61 const doctype = /^<!DOCTYPE [^>]+>/i 

62 let html = '<!DOCTYPE html><html] lang="en"><head></head><body></body></html>" 
03 const doctypeMatch = html.match(doctype) 

64 if (doctypeMatch) { 

85 html = html.substring(doctypeMatch[8].1length) 

66 } 

87 

68 console.log(html) // '<html lang="en"><head></head><body></body></html>' 


从 打印 结果 可 以 看 到 ，HTML 中 的 DOCTYPE 被 成 功 截 取 掉 了 。 


9.3.7 截取 文本 


若 想 分 辩 在 本 轮 循环 中 HTML 模板 是 否 已 经 截取 到 文本 ， 其 实 很 简单 ， 我 们 甚至 不 需要 使 


用 正则 表达 式 。 


在 前 面 的 其 他 标签 类 型 中 ， 我 们 都 会 判断 剩余 HTML 模板 的 第 一 个 字符 是 否 是 <“， 如 果 是 ， 


卫 进 


步 确认 到 底 是 哪 种 类 型 。 这 是 因为 以 < 开头 的 标签 类 型 太 多 了 ， 如 开始 标签 、 结 束 标签 和 


注释 等 。 然 而 文本 只 有 一 种 ， 如 果 HTML 模板 的 第 一 个 字符 不 是 <， 那么 它 一 定 是 文本 了 。 


例如 : 


61 我 是 文本 </div> 
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上 面 这 段 HTML 模板 并 不 是 以 < 开头 的 ， 所 以 可 以 断定 它 是 以 文本 开头 的 。 
那么 ,如 何 从 模板 中 将 文本 解析 出 来 呢 ? 我 们 只 需要 找到 下 一 个 < 在 什么 位 置 , 这 之 前 的 所 
有 字符 都 属于 文本 ， 如 图 9-4 所 示 。 


文本 


图 9-4” 尖 括 号 前 面 的 字符 都 属于 文本 


在 代码 中 可 以 这 样 实现 : 


61 while (html) { 


62 let text 

63 let textEnd = html.indexof('<') 

84 

65 // 截取 文本 

66 if (textEnd >= 86) { 

67 text = htm1l.substring(86，textEnd) 
68 html = html.substring(textEnd) 

69 } 

16 

11 // 如 果 模 板 中 找 不 到 《， 就 说 明 整 个 模板 都 是 文本 
12 if (textEnd < 6) { 

13 text = html 

14 html = "" 

15 } 

16 

17 // 触发 钩子 函数 

18 if (options.chars && text) { 

19 options.chars(text) 

26 } 

21 } 


上 面 的 代码 共有 三 部 分 逻辑 。 

第 一 部 分 是 截取 文本 ， 这 在 前 面 介绍 过 了 。< 之 前 的 所 有 字符 都 是 文本 ， 直 接 使 用 htm1l . 
substring 从 模板 的 最 开始 位 置 截 取 到 < 之 前 的 位 置 ， 就 可 以 将 文本 截取 出 来 。 

第 二 部 分 是 一 个 条 件 ， 如 果 在 整个 模板 中 都 找 不 到 <， 那 么 说 明 整 个 模板 全 是 文本 。 

第 三 部 分 是 触发 钩子 函数 并 将 截取 出 来 的 文本 放 到 参数 中 。 

关于 文本 ， 还 有 一 个 特殊 情况 需要 处 理 : 如 果 < 是 文本 的 一 部 分 ， 该 如 何 处 理 

举 个 例子 : 

61 1<2</div> 
在 上 面 这 样 的 模板 中 ， 如 果 只 截取 第 一 个 < 前 面 的 字符 ， 最 后 被 截取 出 来 的 将 只 有 1 ， 而 不 能 把 
所 有 文本 都 截取 出 来 。 

那么 ， 该 如 何 解 决 这 个 问题 呢 ? 


~ 
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有 一 个 思路 是 ， 如果 将 < 前 面 的 字符 截取 完 之 后 , 剩余 的 模板 不 符合 任何 需要 被 解析 的 片段 
的 类 型 ， 就 说 明 这 个 < 是 文本 的 一 部 分 。 

什么 是 需要 被 解析 的 片段 的 类 型 ? 在 9.3.1 市 中 ,我们 说 过 HTML 解析 器 是 一 段 一 段 截取 模 
板 的 ， 而 被 截取 的 每 一 段 都 符合 某 种 类 型 ， 这 些 类 型 包括 开始 标签 、 结 束 标签 和 注释 等 。 

说 的 再 具体 一 点 ， 那 就 是 上 面 这 段 代码 中 的 1 被 截取 完 之 后 ， 剩 余 模板 是 下 面 的 样子 : 

91 《2</div> 

<2 符合 开始 标签 的 特征 么 ? 不 符合 。 

<2 符合 结束 标签 的 特征 么 ? 不 符合 。 

<2 符合 注释 的 特征 么 ?不 符合 。 

当 剩 余 的 模板 什么 都 不 符合 时 ， 就 说 明 < 属于 文本 的 一 部 分 。 

当 判 断 出 < 是 属于 文本 的 一 部 分 后 ， 我 们 需要 做 的 事情 是 找到 下 一 个 <， 并 将 其 前 面 的 文本 
截取 出 来 加 到 前 面 截取 了 一 半 的 文本 后 面 。 


这 里 还 用 上 面 的 例子 ， 第 二 个 < 之 前 的 字符 是 <2， 那 么 把 <2 截取 出 来 后 ， 追 加 到 上 一 次 截 
取出 来 的 1 的 后 面 ， 此 时 的 结果 是 : 


61 1<2 


ss 
总 


3? 


en 


截取 后 剩余 的 模板 是 : 9 
91 </div> 


如 果 剩 余 的 模板 依然 不 符合 任何 被 解析 的 类 型 ， 那 么 重复 此 过 程 。 直 到 所 有 文本 都 解析 完 。 
说 完了 思路 ， 我 们 看 一 下 具体 的 实现 ， 伪 代码 如 下 : 


61 while (html) { 


82 let text, rest, next 

83 let textEnd = html.indexof('<') 

04 

65 // 截取 文本 

66 if (textEnd >= 6) { 

87 rest = html.slice(textEnd) 

88 while ( 

69 lendTag.test(rest) && 

16 lstartTagOpen.test(rest) && 

11 !comment .test(rest) && 

12 !conditionalComment .test(rest) 
13 ) { 

14 // 如 果 '<' 在 纯 文本 中 ， 将 它 视 为 纯 文本 对 竺 
15 next = rest.indexof('<', 1) 

16 if (next < 6) break 

17 textEnd += next 

18 rest = html.slice(textEnd) 

19 


26 text = htm1l.substring(86，textEnd) 
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21 html = html.substring(textEnd) 
22 } 

23 

24 // 如 果 模板 中 找 不 到 <， 那 么 说 明 整 个 模板 都 是 文本 
25 if (textEnd < 6) { 

26 text = html 

27 html = "" 

28 } 

29 

36 // 触发 钩子 池 数 

31 if (options.chars && text) { 

32 options.chars(text) 

33 } 

34 }) 


在 代码 中 ， 我 们 通过 while 来 解决 这 个 问题 ( 注意 是 里 面 的 while )。 如 果 剩 余 的 模板 不 符 


合 任何 被 解析 的 类 型 ， 那么 重复 解析 文本 ， 直 到 剩余 模板 符合 被 解析 的 类 型 为 止 。 


在 上 面 的 代码 中 ,endTag、startTagOpen、comment 和 condit 
达 式 ， 分 别 匹配 结束 标签 、 开 始 标签 、 注 释 和 条 件 注释 。 
在 Vue.js 源码 中 ， 和 截取 文本 的 逻辑 和 其 他 的 实现 思路 一 致 。 


9.3.8 纯 文 本 内 容 元 素 的 处 理 


ionalComment 都 是 正则 表 


什么 是 纯 文本 内 容 元 素 呢 ? script 、style 和 textarea 这 三 种 元 素 叫 作 纯 文本 内 容 元 素 。 


解析 它们 的 时 候 , 会 把 这 三 种 标签 内 包含 的 所 有 内 容 都 当 作 文本 处 理 。 
前 面 介 绍 开始 标签 、 结 束 标签 、 文 本 、 注 释 的 截取 时 ， 其 实 都 是 和 


那么 ,具体 该 如 何 处 理 呢 ? 
耻 认 当前 需要 截取 的 元 素 的 


父 级 元 素 不 是 纯 文本 内 容 元 素 。 事实 上 ,如 果 要 截取 元 素 的 父 级 元 素 是 纯 文本 内 容 元 素 的 话 ， 处 


理 逻 辑 将 完全 不 一 样 。 


面 的 伪 代 码 
61 while (html) { 
62 if (!lastTag || !isplainTextElement(lastTag)) { 
63 // 父 元 素 为 正常 元 素 的 处 理 逻 辑 
84 } else { 
65 // 父 元 素 为 script、style、textarea 的 处 理 远 辑 
66 
67 } 


在 上 面 的 代码 中 ，lastTag 表示 父 元 素 。 可 以 看 到 , 在 while 中 


事实 上 , 在 while 循环 中 , 最 外 层 的 判断 条 件 就 是 父 级 元 素 是 不 是 纯 文本 内 容 元 素 。 例如 下 


， 首 先进 行 判断 ， 如 果 父 元 


素 不 存在 或 者 不 是 纯 文本 内 容 元 素 ， 那 么 进行 正常 的 处 理 逻 辑 ， 也 就 是 前 面 介绍 的 逻辑 。 
而 当 父 元 素 是 script 这 种 纯 文本 内 容 元 素 时 ,会 进入 到 else 这 个 语句 里 面 。 由 于 纯 文 本 


内 容 元 素 都 被 视 作 文本 处 理 , 所 以 我 们 的 处 理 逻 辑 就 变 得 很 简单 ， 只 需要 把 这 些 文本 截取 出 来 并 


触发 钩子 函数 chars， 然 后 再 将 结束 标签 截取 出 来 并 触发 钩子 函数 end。 
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也 就 是 说 ， 如 果 父 标签 是 纯 文 本 内 容 元 素 ， 那 么 本 轮 循环 会 一 次 性 将 这 个 父 标 签 给 处 理 


完毕 。 
伪 代 码 如 下 : 
61 while (html) { 
62 if (!lastTag || !isplainTextElement(lastTag)) { 
83 // 父 元 素 为 正常 元 素 的 处 理 远 辑 
84 } else { 
@5 // 父 元 素 为 scFPipt、style、textarea 的 处 理 远 辑 
66 const stackedTag = lastTag.toLowerCase() 
87 const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp 
('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i')) 
88 const rest = html.replace(reStackedTag, function (all, text) { 
89 if (options.chars) { 
16 options.chars(text) 
11 } 
12 return 
13 }) 
14 html = rest 
15 options.end(stackedTag) 
16 } 
17 } 


上 面 代码 中 的 正则 表达 式 可 以 匹配 结束 标签 前 包括 结束 标签 自身 在 内 的 所 有 文本 。 

我 们 可 以 给 replace 方法 的 第 二 个 参数 传递 一 个 函数 ,在 这 个 函数 中 ,我 们 得 到 了 参数 text 
( 表示 结束 标签 前 的 所 有 内 容 ), 触 发 了 钩子 函数 chars 并 把 text 放 到 钧 子 函 数 的 参数 中 传 出 去 。 
最 后 ,返回 了 一 个 空 字符 串 ， 说 明 将 匹配 到 的 内 容 都 截 掉 了 。 注 意 ,， 这 里 的 截 掉 会 将 内 容 和 结束 
标签 一 起 截取 掉 。 

最 后 , 调用 钩子 函数 end 并 将 标签 名 放 到 参数 中 传 出 去 , 这 说 明 本 轮 循环 中 的 所 有 逻辑 都 已 
处 理 完毕 。 

假如 我 们 现在 有 这 样 一 个 模板 : 

861 <div id="el"y 


62 <script>console.log(1)</script> 
@3 </div> 


当 解 析 到 script 中 的 内 容 时 ,模板 是 下 面 的 样子 : 


61 console.log(1)</script> 
92 </div> 


此 时 父 元 素 为 script， 所 以 会 进入 到 else 中 的 逻辑 进行 处 理 。 在 其 处 理 过 程 中 , 会 触发 钧 
子孙 数 chars 和 end。 


钩子 函数 chars 的 参数 为 script 中 的 所 有 内 容 ， 本 例 中 大 概 是 下 面 的 样子 : 


61 chars('console.log(1)') 


钩子 函数 end 的 参数 为 标签 名 ， 本 例 中 是 script。 
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处 理 后 的 剩余 模板 如 下 : 


el </div> 


9.3.9 使 用 栈 维护 DOM 层级 
通过 前 面 几 节 的 介绍 , 特别 是 9.3.8 节 中 的 介绍 , 你 一 定 会 感到 很 奇怪 , 如 何 知道 父 元素 是 谁 ? 
在 前 面 几 节 中 ， 我 们 并 没有 介绍 HTML 解析 需 内 部 其 实 也 有 一 个 栈 来 维护 DOM 层级 关系 ， 
其 逻辑 与 9.2.1 节 相 同 : 就 是 每 解析 到 开始 标签 ， 就 向 栈 中 推进 去 一 个 ; 每 解析 到 标签 结束 ， 就 
弹出 来 一 个 。 因 此 ， 想 取 到 父 元 素 并 不 难 ， 只 需要 拿 到 栈 中 的 最 后 一 项 即 可 。 
同时 , HTML 解析 咒 中 的 栈 还 有 男 一 个 作用 , 它 可 以 检测 出 HTML 标签 是 否 正确 闭合 。 例 如: 
el <div><p></div> 
在 上 面 的 代码 中 ，p 标签 忘记 写 结束 标签 ， 那么 当 HTML 解析 器 解析 到 div 的 结束 标签 时 ， 
栈 顶 的 元 素 却 是 p 标签 。 这 个 时 候 从 栈 顶 向 栈 底 循环 找到 div 标签 ， 发 现在 找到 div 标签 之 前 遇 
到 的 所 有 其 他 标签 都 忘记 写 闭 合 标 签 ， 此 时 Vue.js 会 在 非 生产 环境 下 的 控制 台中 打印 警告 提示 。 
关于 使 用 栈 来 维护 DOM 层级 关系 的 具体 实现 思路 ,9.2.1 节 已 经 详细 介绍 过 , 这 里 不 再 重复 


9.3.10 ”整体 逻辑 
前 面 我 们 把 开始 标签 、 结 束 标签 、 注 释 、 文 本 、 纯 文本 内 容 元 素 等 的 截取 方式 拆 分 开 ， 单独 
进行 了 详细 介绍 。 本 节 中 , 我 们 就 来 介绍 如 何 将 这 些 解 析 方 式 组 装 起 来 完成 HIML 解析 咒 的 功能 。 
首先 ，HTML 解析 器 是 一 个 函数 。 就 像 9.2 节 介 绍 的 那样 ，HTML 解析 器 最 终 的 目的 是 实现 
这 样 的 功能 : 


91 parseHTML(template, { 


62 start (tag, attrs, unary) { 

63 // 每 当 解 析 到 标签 的 开始 位 置 时 ， 触 发 该 函数 
64 下 

65 end () { 

66 // 每 当 解 析 到 标签 的 结束 位 置 时 ， 和 触发 该 函数 
67 }， 

68 chars (text) { 

69 // 每 当 解 析 到 文本 时 ， 和 触发 该 函数 

16 5 

11 comment (text) { 

12 // 每 当 解 析 到 注释 时 ， 触 发 该 函数 

13 } 

14 })) 


所 以 HTML 解析 咒 在 实现 上 肯定 是 一 个 函数 ， 它 有 两 个 参数 一 一 模板 和 选项 : 
@1 export function parseHTML (html, options) { 


62 // 做 点 什么 
63 } 
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我 们 的 模板 是 一 小 段 一 小 段 去 截取 与 解析 的 , 所 以 需要 一 个 循环 来 不 断 截 取 ， 直到 全 部 截取 
FE . 

61 export function parseHTML (html, options) { 

82 while (html) { 

63 // 做 点 什么 

64 } 

65 } 


在 循环 中 ,首先 要 判断 父 元 素 是 不 是 纯 文本 内 容 元 素 ， 因 为 不 同类 型 父 节 点 的 解析 方式 将 完 
全 不 同 : 


61 export function parseHTML (htm1，options) { 
082 while (html) { 


03 if (!lastTag || !isplainTextElement(lastTag)) { 
64 // 父 元 素 为 正常 元 素 的 处 理 逻 辑 

685 } else { 

66 // 父 元 素 为 script、style、textarea 的 处 理 远 辑 
67 } 

88 } 

69 } 


在 上 面 的 代码 中 , 我 们 发 现 这 里 已 经 把 整体 逻辑 分 成 了 两 部 分 , 一 部 分 是 父 标签 为 正常 标签 

的 逻辑 ， 另 一 部 分 是 父 标签 为 script 、style、textarea 这 种 纯 文 本 内 容 元 素 的 逻辑 。 
如 果 父 标签 为 正常 的 元 素 , 那么 有 几 种 情况 需要 分 别处 理 ， 比 如 需要 分 辨 出 当前 要 解析 的 一 

小 段 模板 到 底 是 什么 类 型 。 是 开始 标签 ? 还 是 结束 标签 ” 又 或 者 是 文本 ? 9 
我 们 把 所 有 需要 处 理 的 情况 都 列 出 来 ， 有 下 面 几 种 情况 : 

口 文本 

口 注释 

口 条 件 注释 

D DOCTYPE 

口 结束 标签 

口 开始 标签 
我 们 会 发 现 , 在 这 些 需 要 处 理 的 类 型 中 , 除了 文本 之 外 ， 其 他 都 是 以 标签 形式 存在 的 ， 而 标 

签 是 以 < 开头 的 。 
所 以 逻辑 就 很 清晰 了 ， 我 们 先 根据 “来 判断 需要 解析 的 字符 是 文本 还 是 其 他 的 : 


61 export function parseHTML (html, options) { 
02 while (html) { 


63 if (!lastTag || !isplainTextElement(lastTag)) { 
84 let textEnd = html.indexof('<') 

85 if (textEnd === 6) { 

66 // 做 点 什么 

67 } 
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09 let text, rest, next 
16 if (textEnd >= 6) { 
11 // 解析 文本 
12 } 
13 
14 if (textEnd < 6) { 
15 text = html 
16 html = "" 
17 } 
18 
19 if (options.chars && text) { 
20 options.chars(text) 
21 } 
22 } else { 
23 // 父 元 素 为 scPript、style、textarea 的 处 理 还 辑 
24 } 
25 } 
26 } 


在 上 面 的 代码 中 ,我们 可 以 通过 < 来 分 状 是 否 需要 进行 文本 解析 。 关 于 文本 解析 的 内 容 ， 详 


见 9.3.7 节 。 


于 


| 
EE， 


和 


如 果 通 过 < 分辨 出 即将 解析 的 这 


我 们 需要 进一步 分 辩 具 体 是 哪 种 类 型 : 


export function parseHTML (htm1，options) { 
while (html) { 


if (!lastTag || !isPplainTextElement(lastTag)) { 
let textEnd = html.indexof('<') 
if (textEnd === 6) { 
// 注释 


if (comment.test(html)) { 
// 注释 的 处 理 远 辑 
continue 


// 条 件 注 释 

if (conditionalLlComment .test(htm1l)) { 
// 条 件 注释 的 处 理 逻 辑 
continue 


} 


// DOCTYPE 
const doctypeMatch = html.match(doctype) 
if (doctypeMatch) { 

// DOCTYPE 的 处 理 远 辑 

continue 


} 


// 结束 标签 
const endTagMatch = html.match(endTag) 
if (endTagMatch) { 

// 结束 标签 的 处 理 远 辑 


小 部 分 字符 不 是 文本 而 是 标签 类 , 那么 标签 类 有 那么 多 类 
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29 continue 

36 } 

31 

32 // 开始 标签 

33 const startTagMatch = parseStartTag() 
34 if (startTagMatch) { 

35 // 开始 标签 的 处 理 远 辑 

36 continue 

37 } 

38 } 

39 

46 let text, rest, next 

41 if (textEnd >= 6) { 

42 // 解析 文本 

43 

44 

45 if (textEnd < 6) { 

46 text = html 

47 htm1 = "" 

48 } 

49 

56 if (options.chars && text) { 
5 于 options.chars(text) 

52 

53 } else { 

54 // 父 元 素 为 script、sty1le、textarea 的 处 理 远 辑 
55 } 

56 } 

57 } 


关于 不 同类 型 的 具体 处 理 方式 ， 前 面 已 经 详细 介绍 过 ， 这 里 不 再 重复 。 


9.4 文本 解析 器 


文本 解析 器 的 作用 是 解析 文本 。 你 可 能 会 觉得 很 奇怪 ,文本 不 是 在 HTML 解析 需 中 被 解析 
出 来 了 么 ? 准确 地 说 ， 文 本 解析 器 是 对 HTML 解析 器 解析 出 来 的 文本 进行 二 次 加 工 。 为 什么 要 
进行 二 次 加 工 ? 

文本 其 实 分 两 种 类 型 ， 一 种 是 纯 文 本 ， 另 一 种 是 带 变 量 的 文本 。 例 如 下 面 这 样 的 文本 是 纯 
文本 : 

61 Hello Berwin 

而 下 面 这 样 的 是 带 变 量 的 文本 : 

61 Hello {{name}} 

在 Vuejs 模板 中 ， 我 们 可 以 使 用 变量 来 填充 模板 。 而 HTML 解析 器 在 解析 文本 时 ， 并 不 会 
区 分 文本 是 否 是 带 变 量 的 文本 。 如 果 是 纯 文 本 ， 不 需要 进行 任何 处 理 ; 但 如 果 是 带 变 量 的 文本 ， 
那么 需要 使 用 文本 解析 器 进一步 解析 。 因 为 带 变 量 的 文本 在 使 用 虚拟 DOM 进行 浑 染 时 ， 需 要 将 
变量 替换 成 变量 中 的 值 。 


一 
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我 们 在 9.2 节 中 介绍 过 , 每 当 HTML 解析 器 解析 到 文本 时 ,都 会 触发 chars 函数 , 并 且 从 参 
数 中 得 到 解析 出 的 文本 。 在 chars 函数 中 ， 我 们 需要 构建 文本 类 型 的 AST， 并 将 它 添加 到 父 节 
点 的 children 属性 中 。 

而 在 构建 文本 类 型 的 AST 时 ， 纯 文本 和 带 变量 的 文本 是 不 同 的 处 理 方 式 。 如 果 是 带 变量 的 
文本 ,我 们 需要 借助 文本 解析 器 对 它 进行 二 次 加 工 ， 其 代码 如 下 : 


在 chars 函数 中 ， 如 果 执行 parseText 后 有 返回 结果 ， 则 说 明文 本 是 带 变 量 的 文本 ， 并 且 


parseHTML(template, { 
start (tag, attrs, unary) { 
// 每 当 解 析 到 标签 的 开始 位 置 时 ， 触 发 该 函数 
}), 
end () { 
// 每 当 解 析 到 标签 的 结束 位 置 时 ， 和 触发 该 函数 


四 
chars (text) { 

text = text.trim() 

if (text) { 
const children = currentParent.children 
let expression 
if (expression = parseText(text)) { 

children.push({ 


type: 2， 
expression, 
text 

}) 

} else { 

children.push({ 
type: 3， 
text 

}) 


} 
} 
}， 
comment (text) { 
// 每 当 解 析 到 注释 时 ， 和 触发 该 函数 


}) 


已 经 通过 文本 解析 器 ( parseText ) 二 次 加 工 ， 此 时 构建 一 个 带 变 量 的 文本 类 型 的 AST 并 将 其 添 
加 到 父 节点 的 children 属性 中 。 和 否则 ， 就 直接 构建 一 个 普通 的 文本 节点 并 将 其 添加 到 父 节 点 的 


children 


属性 中 。 而 代码 中 的 currentParent 是 当前 节点 的 父 节 点 ， 也 就 是 前 面 介 绍 的 栈 中 的 


最 后 一 个 节点 。 


假设 
61 


chars 函数 被 触发 后 ， 我 们 得 到 的 text 是 一 个 带 变量 的 文本 : 


"Hello {{name}}" 


这 个 带 变量 的 文本 被 文本 解析 器 解析 之 后 ， 得 到 的 expression 变量 是 这 样 的 : 


81 


"Hello "+_s(name) 


上 面 代 码 中 的 _s 其 实 是 下 面 这 个 tostring 函数 的 别名 : 
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61 function tostring (val) { 


82 return val == null 

03 有 

84 : typeof val === “object 

85 ? JSON.stringify(val, null, 2) 
66 : String(val) 

67 } 


假设 当前 上 下 文中 有 一 个 变量 name， 其 值 为 Berwin, 那么 expression 中 的 内 容 被 执行 时 ， 
它 的 内 容 是 不 是 就 是 Hello Berwin 了 ? 
我 们 举 个 例子 : 


61 var obj = {name: 'Berwin'} 
62 with(obj) { 


0@3 function toSstring (val) { 

@4 return val == null 

85 机 

86 : typeof val === “object 

87 ? JSON.stringify(val, null, 2) 

88 : String(val) 

69 

16 console.log("Hello "+toString(name)) // "Hello Berwin" 
11 } 


在 上 面 的 代码 中 ， 打 印 出 来 的 结果 是 "Hello Berwin"。 
事实 上 ， 最终 AST 会 转换 成 代码 字符 串 放 在 with 中 执行 ， 这 部 分 内 容 会 在 第 11 章 中 详细 


接着 ， 我 们 详细 介绍 如 何 加 工 文本 ， 也 就 是 文本 解析 器 的 内 部 实现 原理 。 

在 文本 解析 器 中 ， 第 一 步 要 做 的 事情 就 是 使 用 正则 表达 式 来 判断 文本 是 否 为 带 变量 的 文本 ， 
也 就 是 检查 文本 中 是 否 包含 {{xxx}} 这 样 的 语法 。 如 果 是 纯 文 本 ， 则 直接 返回 undefined; 如 果 
是 带 变 量 的 文本 ， 再 进行 二 次 加 工 。 所 以 我 们 的 代码 是 这 样 的 : 


61 function parseText (text) { 
62 const tagRE = /\{\{((?:.|\n)+?)\}\}/g 


83 if (!tagRE(text)) { 
684 return 

65 } 

e6 } 


在 上 面 的 代码 中 ， 如 果 是 纯 文 本 ， 则 直接 返回 。 如 果 是 带 变 量 的 文本 ， 该 如 何 处 理 呢 ? 

一 个 解决 思路 是 使 用 正则 表达 式 匹配 出 文本 中 的 变量 ， 先 把 变量 左边 的 文本 添加 到 数组 中 ， 
然后 把 变量 改 成 _s(x) 这 样 的 形式 也 添加 到 数组 中 。 如 果 变 量 后 面 还 有 变量 ， 则 重复 以 上 动作 ， 
直到 所 有 变量 都 添加 到 数组 中 。 如 果 最 后 一 个 变量 的 后 面 有 文本 ， 就 将 它 添 加 到 数组 中 。 

这 时 我 们 其 实 已 经 有 一 个 数组 , 数组 元 素 的 顺序 和 文本 的 顺序 是 一 致 的 ,此 时 将 这 些 数 组 元 
素 用 + 连 起 来 变 成 字符 串 ， 就 可 以 得 到 最 终 想 要 的 效果 ， 如 图 9-5 所 示 。 


"Hello {{name}}" 


解析 


' "Hello™' '_s(name)’ 


‘wvHello" + s(name)’ 
图 9-5 文本 解析 过 程 
在 图 9-5 中 ， 最 上 面 的 字符 串 表示 即将 解析 的 文本 ， 中 间 两 个 方块 表示 数组 中 的 两 个 元 素 。 
最 后 ， 使 用 数组 方法 join 将 这 两 个 元 素 合并 成 一 个 字符 串 。 
具体 实现 代码 如 下 : 


61 function parseText (text) { 
02 const tagRE = /\{\{((?:.|\n)+?)\}\}/g 


03 if (!tagRE.test(text)) { 

64 return 

65 } 

6e6 

67 const tokens = [] 

08 let lastIndex = tagRE.lastIndex = 6 

89 let match, index 

16 while ((match = tagRE.exec(text))) { 

11 index = match.index 

12 // 先 把 {{ 前 边 的 文本 添加 到 tokens 中 

13 if (index > lastIndex) { 

14 tokens.push(JSON.stringify(text.slice(lastIindex, index))) 
15 } 

16 // 把 变量 改 成 _s(X) 这 样 的 形式 也 添加 到 数组 中 

17 tokens.push(*_s(${match[1].trim()}) ) 

18 

19 // 设置 lastIndex 来 保证 下 一 轮 循环 时 ， 正则 表达 式 不 再 重复 匹配 已 经 解析 过 的 文本 
26 lastIndex = index + match[6].1Length 

21 } 

22 

23 // 当 所 有 变量 都 处 理 完 毕 后 ， 如 果 最 后 一 个 变量 右边 还 有 文本 ， 就 将 文本 添加 到 数组 中 
24 if (lastIndex < text.length) { 

25 tokens.push(JSON.stringify(text.slice(lastIndex))) 

26 } 

27 return tokens.join('+' 


这 是 文本 解析 器 的 全 部 代码 ， 代 码 并 不 多 ， 逻 和 辑 也 不 是 很 复杂 。 

这 段 代码 有 一 个 很 关键 的 地 方 在 lastIndex: 每 处 理 完 一 个 变量 后 , 会 重新 设置 lastIndex 
的 位 置 ， 这 样 可 以 保证 如 果 后 面 还 有 其 他 变量 ， 那 么 在 下 一 轮 循环 时 可 以 从 lastIndex 的 位 置 
开始 向 后 匹配 ， 而 lastIndex 之 前 的 文本 将 不 再 被 匹配 。 

下 面 用 文本 解析 需 解 析 不 同 的 文本 看 看 : 


61 ”parseText(' 你 好 {{name}}') 
62  // ”你 好 "+_s(name) 


64 ”parseText(' 你 好 Berwin') 
@5 // undefined 


687 ”parseText(' 你 好 {{name}}， 你 今年 已 经 {{age}} 岁 啦 ') 
88 //“'" 你 好 "+_s(name)+"， 你 今年 已 经 "+_s(age)+" 岁 啦 "' 


从 上 面 代码 的 打印 结果 可 以 看 到 ， 文 本 已 经 被 正确 解析 了 。 


9.5 总 结 


解析 器 的 作用 是 通过 模板 得 到 AST ( 抽象 语法 树 )。 

生成 AST 的 过 程 需要 借助 HTML 解析 器 ， 当 HTML 解析 器 触发 不 同 的 钩子 函数 时 ,我 们 可 
以 构建 出 不 同 的 节点 。 

随后 , 我 们 可 以 通过 栈 来 得 到 当前 正在 构建 的 节点 的 父 节点 , 然后 将 构建 出 的 节点 添加 到 父 
节点 的 下 面 。 

最 终 ， 当 HTML 解析 器 运行 完毕 后 ， 我 们 就 可 以 得 到 一 个 完整 的 带 DOM 层级 关系 的 AST。 

HTML 解析 嚣 的 内 部 原理 是 一 小 段 一 小 段 地 截取 模板 字符 串 , 每 截取 一 小 段 字 符 串 , 就 会 根 
据 截 取出 来 的 字符 串 类 型 触发 不 同 的 钩子 函数 ， 直 到 模板 字符 串 截 空 停止 运行 。 


文本 分 两 种 类 型 ， 不 带 变量 的 纯 文 本 和 带 变 量 的 文本 ， 后 者 需要 使 用 文本 解析 器 进行 二 次 
加 工 。 


优 化 希 


解析 恬 的 作用 是 将 HTML 模板 解析 成 AST， 而 优化 器 的 作用 是 在 AST 中 找 出 静态 子 树 并 打 
上 标记 。 

静态 子 树 指 的 是 那些 在 AST 中 永远 都 不 会 发 生变 化 的 节点 。 例 如 ， 一 个 纯 文本 节点 就 是 更 
态 子 树 ， 而 带 变 量 的 文本 节点 就 不 是 静态 子 树 ， 因 为 它 会 随 着 变量 的 变化 而 变化 。 

标记 静态 子 树 有 两 点 好 处 : 

口 每 次 重新 泻 染 时 ， 不 需要 为 静态 子 树 创建 新 节点 ; 
口 在 虚拟 DOM 中 打 补 丁 (patching ) 的 过 程 可 以 跳 过 。 

每 次 重新 泻 染 时 ， 不 需要 为 静态 子 树 创建 新 节点 ， 是 什么 意思 呢 ? 

前 面 介绍 虚拟 DOM 时 , 我 们 说 每 次 重新 演 染 都 会 使 用 最 新 的 状态 生成 一 份 全 新 的 VNode 与 
旧 的 VNode 进行 对 比 。 而 在 生成 VNode 的 过 程 中 ， 如 果 发 现 一 个 节点 被 标记 为 静态 子 树 ， 那 么 
除了 首次 演 染 会 生成 节点 之 外 , 在 重新 泻 染 时 并 不 会 生成 新 的 子 节点 树 ， 而 是 克隆 已 存在 的 静态 
子 树 。 

在 虚拟 DOM 中 打 补 丁 的 过 程 可 以 被 跳 过 ， 叉 是 什么 意思 ? 

第 7 章 介 绍 了 打 补 丁 的 过 程 , 其 中 7.4 节 详细 介绍 了 如 何 对 比 两 个 节点 并 更 新 DOM 的 过 程 。 
在 7.4.1 节 中 ,我们 介绍 了 如 果 两 个 节点 都 是 静态 子 树 ， 就 不 需要 进行 对 比 与 更 新 DOM 的 操作 ， 
直接 跳 过 。 因 为 静态 子 树 是 不 可 变 的 , 不 需要 对 比 就 知道 它 不 可 能 发 生变 化 。 此 外 ， 直 接 跳 过 后 
续 的 各 种 对 比 可 以 节省 JavaScript 的 运算 成 本 。 

优化 顺 的 内 部 实现 主要 分 为 两 个 步骤 : 

(在 AST 中 找 出 所 有 静态 节点 并 打上 标记 ; 

(CO) 在 AST 中 找 出 所 有 静态 根 节 点 并 打上 标记 。 

先 标记 所 有 静态 节点 ， 再 标记 所 有 静态 根 节 点 。 那 么 , 什么 是 静态 节点 ? 像 下 面 这样 永 远 都 
不 会 发 生变 化 的 节点 属于 静态 节点 : 

81 <p> 我 是 静态 节点 ， 我 不 需要 发 生变 化 《</p> 
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落实 到 AST 中 ,静态 方 点 指 的 是 static 属性 为 true 的 节点 ， 例 如 : 


61 { 

62 type: 1， 

83 tag: 'p', 

04 staticRoot: false， 
85 static: true, 

06 ee 

67 } 


二 什么 是 静态 根 节 点 ? di 节点 下 面 的 所 有 子 节点 都 是 静态 节点 , 并 且 它 的 父 级 是 
动态 节点 ， 那 么 它 就 是 静态 根 节 点 。 下 面 模板 中 的 ul 就 属于 静态 根 节 点 : 

el <ul> 

62 <1i> 我 是 静态 节点 ， 我 不 需要 发 生变 化 </1iy> 

63 <1i> 我 是 静态 节点 2， 我 不 需要 发 生变 化 </1i> 

684 <1i> 我 是 静态 节点 3， 我 不 需要 发 生变 化 /1iy> 


85 </ul> 

落实 到 AST 中 ， 静 态 根 节 点 指 的 是 staticRoot 属性 为 true 的 节点 ， 例 如: 
61 { 

62 type: 1， 

03 tag: "ul', 

04 staticRoot: true, 

@5 static: true, 

06 ee 

07 } 

举 个 例子 : 


61 <div id="el">Hello {{name}}</div> 


如 果 我 们 有 上 面 这 样 一 个 模板 ， 它 转换 成 AST 之 后 是 下 面 的 样子 : 


el { 

62 'type': 1， 

83 "tag': 'div', 

84 "attrsList': [ 

65 { 

86 'name': “id ， 

87 "Value ': 'el’ 

68 } 

69 ]， 

16 "attrsMap : { 

11 'id': "el 

12 }, 

13 'children': [ 

14 { 

15 'type' :2， 

16 "expression':'"Hello "+_s(name)', 
17 'text':'Hello {{name}}' 
18 } 

19 ]， 

26 'plain': false， 


21 'attrs': [ 
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22 { 

23 “name ': “id ， 
24 'value': "el” 
25 } 

26 ] 

27 } 

经 过 优化 器 的 优化 之 后 ，AST 是 下 面 的 样子 : 
el 1{ 

02 'type': 1， 

93 'tag': 'div', 

84 "attrsList': [ 

@5 { 

66 “name ': "id ， 
87 'value': “el 
68 } 

69 ]， 

16 'attrsMap': { 

11 "id': "el' 

12 }, 

13 'children': [ 

14 { 

15 'type': 2， 

16 "expression': '"Hello "+_s(name)', 
17 'text': 'Hello {{name}}', 
18 'static': false 
19 } 

29 ]， 

21 'plain': false， 

22 'attrs': [ 

23 { 

24 'name': 'id', 
25 'value': '"el"' 
26 } 

27 ]， 

28 'static': false， 

29 "staticRoot ' : false 
30 } 


可 以 看 到 ，AST 中 多 了 static 属性 和 staticRoot 属性 ， 它 们 分 别 用 来 标记 节点 是 否 是 静 


由 于 本 例 中 的 模板 没有 静态 节点 ， 所 以 AST 中 的 static 和 staticRoot 都 是 false。 
在 源码 中 ， 代 人 码 是 这 样 实现 的 : 


@1 export function optimize (root) { 


62 if (!root) return 

63 // 第 一 步 : 标记 所 有 静态 节点 
84 markStatic(root) 

65 // 第 二 步 : 标记 所 有 静态 根 节点 
66 markStaticRoots(root) 


67 } 
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10.1 找 出 所 有 静态 节点 并 标记 


找 出 所 有 静态 子 节点 并 不 难 ， 我 们 只 需要 从 根 节点 开始 ， 先 判断 根 节点 是 不 是 静态 根 节点 ， 
用 相同 的 方式 处 理子 节点 , 接着 用 同样 的 方式 去 处 理子 节点 的 子 节点 ,直到 所 有 节点 都 被 处 理 
之 后 程序 结束 ， 这 个 过 程 叫 作 递归 。 

下 面 的 代码 先 使 用 isstatic 函数 来 判断 节点 是 否 是 静态 节点 , 然后 如 果 节 点 的 类 型 等 于 1， 
说 明 节 点 是 元 素 节点 ， 那 么 循环 该 节点 的 子 节 点 ， 调 用 markstatic 函数 用 同样 的 处 理 逻 辑 来 处 
理子 节点 : 


61 function markStatic (node) { 


02 node.static = isStatic(node) 

83 if (node.type === 1) { 

64 for (let i = 6，1 = node.children.length; i < 1; i++) { 
85 const child = node.children[i] 

66 markStatic(child) 

67 } 

68 } 

69 } 

那么 isstatic 函数 是 如 何 判断 一 个 节点 是 否 是 静态 节点 的 呢 ? 
源码 实现 如 下 : 

61 function isStatic (node) { 

92 if (node.type === 2) { // 带 变量 的 动态 文本 节点 

83 return false 

64 } 

05 if (node.type === 3) { // 不 带 变 量 的 纯 文本 节点 

66 return true 

87 

08 return !l!l(node.pre || ( 

69 Inode.hasBindings && // 没有 动态 绑 定 

16 Inode.if && !node.for && // 没有 v-if 或 v-for 或 v-else 
11 1isBuiltInTag(node.tag) && // 不 是 内 置 标签 

12 isPlatformReservedTag(node.tag) && // 不 是 组 件 

13 lisDirectChildofTemplateFor(node) && 

14 Object.keys(node).every(isStatickey) 

15 )) 

16 } 


当 模 板 被 解析 器 解析 成 AST 时 ， 会 根据 不 同 元 素 类 型 设置 不 同 的 type 值 。type 的 取 值 如 
表 10-1 所 示 。 


表 10-1 type 的 取 值 及 其 说 明 


type 的 值 说 明 
1 元 素 节 点 
2 带 变 量 的 动态 文本 节点 
3 不 带 变 量 的 纯 文本 节点 


126 第 10 章 优化 器 


六 


上 面 代 码 中 的 逮 辑 很 明显 ， 如 果 type 等 于 2， 说 明 节点 是 带 变量 的 文本 节点 ， 那 它 不 可 能 
是 静态 节点 ， 所 以 返回 false。 

如 果 type 等 于 3 ,说 明 节点 是 不 带 变量 的 纯 文本 节点 , 那 它 一 定 是 静态 节点 ,所 以 返回 true。 

当 type 等 于 1 时 ,说 明 节点 是 元 素 节点 。 当 一 个 节点 是 元 素 节点 时 ， 想 分 辨 出 它 是 否 是 静 
态 节点 ， 就 会 稍微 有 点 复杂 。 

首先 ， 如 果 元 素 节点 使 用 了 指令 v-pre， 那 么 可 以 直接 断定 它 是 一 个 静态 节点 。 


如 果 元 素 节 点 没有 使 用 指令 v-pre, 那么 它 必须 同时 满足 以 下 条 件 才 会 被 认为 是 一 个 静态 


口 不 能 使 用 动态 绑 定 语法 ， 也 就 是 说 标签 上 不 能 有 以 v- 、@、: 开 头 的 属性 。 
口 不 能 使 用 v-if、v-for 或 者 v-else 指令 。 

口 不 能 是 内 置 标签 ， 也 就 是 说 标签 名 不 能 是 slot 或 者 component。 

口 不 能 是 组 件 ， 即 标签 名 必须 是 保留 标签 ， 例 如 <div></div> 是 保 
<list></1ist> 不 是 保留 标签 。 

口 当前 节点 的 父 节点 不 能 是 带 v-for 指令 的 template 标签 。 

口 节点 中 不 存在 动态 节点 才 会 有 的 属性 。 


Ea 
Ey 
内 
到 


本 


说 明 动态 绑 定语 法 不 包括 v-for、v-if、v-else、v-else-if 和 v-once 等 。 


上 面 第 四 条 提 到 的 保留 标签 分 两 种 : HTML 保留 标签 和 SVG 保留 标签 。 

HTML 保留 标签 有 htm1 body base .head 、1link meta、style title、address article、 
aside、footer 、header、h1、h2、h3、h4、h5、h6、hgroup 、nav、section、div、dd、dl1、 
dt、figcaption、figure、picture、hr、img、11、main、ol、p、pre、U1、a、b、abbr 、bdi、 
bdo、 br cite、 code、 data、 dfn、 em i、 kbd、 mark、 q、 rp、 rt、 rtc、 ruby、 s、samp、 
small、 span、strong、sub、sup、time、Uu、var、wbr、area、audio、map、track、video、 
embed、object、param、source、canvas、script、noscript、del、ins、caption、col、 
colgroup、 table, thead, tbody, td, th, tr、 button、 datalist、 fieldset、 form、 input、 
label、 legend、 meter, optgroup, option, output, progress、 select, textarea、 details.、 
dialog、 menu、 menuitem、summary、content、element、shadow、template、blockquote、 
iframe 和 tfoot。 


SVG 保留 标签 有 svg、animate、circle、clippath、cursor、defs、desc、ellipse、 filter、 
font-face、foreign0ObJject、g、g1Lyph、image、1line、marker、mask、missing-glyph、path 、 
pattern、polygon、polyline、rect 、switch、symbol、text 、textpath、tspan、use 和 view。 


如 果 标 签名 在 HTML 保留 标签 或 SVG 保留 标签 中 找 不 到 ， 就 说 明 它 是 组 件 。 
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第 六 条 提 到 的 “节点 中 不 存在 动态 节点 才 会 有 的 属性 ”这 里 详细 解释 一 下 。 事 实 上 ， 如 果 一 
个 元 素 节 点 是 静态 节点 ， 那 么 这 个 节点 上 的 属性 其 实 是 有 范围 的 。 也 就 是 说 ， 如 果 这 个 节点 是 静 
态 节 点 ， 那 么 它 所 有 的 属性 都 可 以 在 这 个 范围 内 找到 。 这 个 范围 是 type、tag 、attrsList、 
attrsMap、 plain、parent、children、attrs、staticClass 和 staticstyle。 


如 果 一 个 元 素 节 点 上 的 属性 在 上 面 这 个 范围 内 找 不 到 相同 的 属性 名 , 就 说 明 这 个 节点 不 是 葡 
态 节 点 。 


我 们 已 经 可 以 判断 一 个 节点 是 否 是 静态 节点 , 并 且 可 以 通过 递归 的 方式 来 标记 子 节点 是 否 是 
静态 节点 。 


但 是 这 里 会 遇 到 一 个 问题 ,递归 是 从 上 向 下 依次 标记 的 ,如 果 父 节点 被 标记 为 静态 节点 之 后 ， 
子 节 点 却 被 标记 为 动态 节点 ,这 时 就 会 发 生 矛 盾 。 因 为 静态 子 树 中 不 应 该 只 有 它 自 己 是 静态 节点 ， 
静态 子 树 的 所 有 子 方 点 应 该 都 是 静态 节点 。 

因此 ,我 们 需要 在 子 节 点 被 打上 标记 之 后 重新 校对 当前 节点 的 标记 是 否 准 确 ,具体 的 做 法 是 : 


61 function markStatic (node) { 


62 node.static = isStatic(node) 

83 if (node.type === 1) { 

@4 for (let i = 86, 1 = node.children.length; i < 1; i++) { 
85 const child = node.children[i] 
66 markStatic(child) 

67 

88 // 新 增 代码 

69 if (!child.static) { 

16 node.static = false 

11 } 

入 } 

13 } 

14 } 


在 子 节点 被 打 完 标记 之 后 , 我 们 需要 判断 它 是 否 是 静态 节点 ， 如 果 不 是 , 那么 它 的 父 节点 也 
不 可 能 是 静态 节点 ， 此 时 需要 将 父 节点 的 static 属性 设置 为 false。 
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找 出 静态 根 节点 的 过 程 与 找 出 静态 节点 的 过 程 类 似 , 都 是 从 根 节点 开始 向 下 一 层 一 层 地 用 递 
归 方式 去 找 。 不 一 样 的 是 ， 如 果 一 个 节点 被 判定 为 静态 根 节 点 ,那么 将 不 会 继续 向 它 的 子 级 继续 
寻找 。 因 为 静态 子 树 肯定 只 有 一 个 根 ， 就 是 最 上 面 的 那个 静态 节点 。 


而 在 10.1 节 中 ， 我 们 标记 静态 节点 时 ， 有 一 个 逻辑 是 静态 节点 的 所 有 子 节 点 也 都 是 静态 节 
点 。 如 果 一 个 静态 节点 的 子 节点 是 动态 节点 ,那么 这 个 节点 也 是 动态 节点 。 因 此 , 我 们 从 上 向 下 
找 , 找到 的 第 一 个 静态 节点 一 定 是 静态 根 节 点 ， 而 它 的 所 有 子 节 点 一 定 也 是 静态 节点 ， 如 网 10-1 
所 示 。 
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静态 根 节点 没 找到 


找到 
静态 根 节 点 


图 10-1 从 上 向 下 寻找 静态 根 节 点 
大 部 分 情况 下 , 我 们 找到 的 第 一 个 静态 节点 会 被 标记 为 静态 根 节 点 , 但 是 有 一 种 情况 ,即便 
它 真 的 是 静态 根 节点 ， 也 不 会 被 标记 为 静态 根 节点 ， 因 为 其 优化 成 本 大 于 收益 。 
这 种 情况 是 一 个 元 素 节 点 只 有 一 个 文本 节点 。 例 如 这 样 的 : 
81 <p> 我 是 静态 节点 ， 我 不 需要 发 生变 化 </p> 
这 个 p 元 素 只 有 一 个 文本 子 节点 ， 此 时 即便 它 是 静态 根 节点 ， 也 不 会 被 标记 。 
上 面 我 们 介绍 的 解决 思路 在 代码 中 的 具体 实现 如 下 : 


61 function markStaticRoots (node) { 


02 if (node.type === 1) { 

63 // Ue sd re 

64 // 这 个 子 节点 不 能 是 只 有 一 个 静态 文本 的 子 节点 ， 否 则 优化 成 本 将 超过 收益 
65 if (node. static && node.children. J &g8 I( 

86 node.children.length === 1 && 

67 node.children[6].type === 3 

68 )) { 

69 node.staticRoot = true 

16 return 

11 } else { 

12 node.staticRoot = false 

13 } 

14 if (node.children) { 

15 for (let i = 06, 1 = node.children.length; i < 1; i++) { 
16 markStaticRoots(node.children[i]) 

17 } 

18 } 

19 } 

20 } 


上 面 代码 中 的 逻辑 可 以 分 为 两 部 分 , 一 部 分 是 标记 当前 节点 是 否 是 静态 根 节点 , 另 一 部 分 是 
标记 子 节点 ~AE 是 否 是 静态 根 节点 No 
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第 一 部 分 逻辑 中 的 判断 条 件 很 明显 : 如 果 节 点 是 静态 节点 , 并 且 有 子 节点 , 并 且 子 节点 不 是 
只 有 一 个 文本 类 型 的 节点 ， 那 么 该 节点 就 是 静态 根 节点 ， 否 则 就 不 是 静态 根 节 点 。 

这 个 条 件 之 所 以 成 立 , 是 因为 如 果 当 前 节点 是 静态 节点 , 就 充分 说 明 该 节点 的 子 节点 也 是 静 
态 节 点 。 同 时 又 排除 了 两 种 情况 : 如 果 静 态 节 点 没有 子 节 点 ,那么 它 不 是 静态 根 节点 ; 如 果 静 态 
节点 只 有 一 个 文本 节点 ， 那 么 它 也 不 是 静态 根 节 点 。 
第 二 部 分 的 逻辑 是 处 理子 节点 ， 这 很 简单 : 循环 子 节 点 列表 ,然后 将 每 一 个 子 节点 重复 执行 
同一 套 逻 辑 即 可 。 但 是 这 里 有 一 个 细节 ， 那 就 是 如 果 当 前 节点 已 经 被 标记 为 静态 根 节点 , 将 不 会 
再 处 理子 节点 。 只 有 当前 节点 不 是 静态 根 节 点 时 ， 才 会 继续 向 子 节 点 中 查找 静态 根 节 点 。 所 以 ， 
在 代码 中 ，node.staticRoot = true 的 下 一 行 代码 是 return 语句 。 


10.3 总 结 


本 章 中 ， 我 们 详细 介绍 了 优化 器 的 作用 和 原理 。 
优化 器 的 作用 是 在 AST 中 找 出 静态 子 树 并 打上 标记 ， 这 样 做 有 两 个 好 处 : 
口 每 次 重新 演 染 时 ， 不 需要 为 静态 子 树 创建 新 节点 ，; 
D 在 虚拟 DOM 中 打 补丁 的 过 程 可 以 跳 过 。 

优化 器 的 内 部 实现 其 实 主要 分 为 两 个 步 又 : 

(D 在 AST 中 找 出 所 有 静态 节点 并 打上 标记 ; 

CO) 在 AST 中 找 出 所 有 静态 根 节点 并 打上 标记 。 

通过 递归 的 方式 从 上 向 下 标记 静态 节点 时 ,如 果 一 个 节点 被 标记 为 静态 节点 , 但 它 的 子 节点 
却 被 标记 为 动态 节点 ,就 说 明 该 节点 不 是 静态 节点 ,可 以 将 它 改 为 动态 节点 。 静态 节点 的 特征 是 
它 的 子 节点 必须 是 静态 节点 。 

标记 完 静 态 节点 之 后 需要 标记 静态 根 节点 ， 其 标记 方式 也 是 使 用 递归 的 方式 从 上 向 下 寻找 ， 


在 寻找 的 过 程 中 遇 到 的 第 一 个 静态 节点 就 为 静态 根 节 点 ， 同 时 不 再 向 下 继续 查找 。 
但 有 两 种 情况 比较 特殊 : 一 种 是 如 果 一 个 静态 根 节 点 的 子 节 点 只 有 一 个 文本 节点 , 那么 不 会 


将 它 标记 成 静态 根 节 点 ,即便 它 也 属于 静态 根 节点 ; 男 一 种 是 如 果 找 到 的 静态 根 节点 是 一 个 没有 
子 节 点 的 静态 节点 , 那么 也 不 会 将 它 标 记 为 静态 根 节 点 。 因 为 这 两 种 情况 下 , 优化 成 本 大 于 收益 。 


代码 生成 怖 


代码 生成 器 是 模板 编译 的 最 后 一 步 ， 它 的 作用 是 将 AST 转换 成 泻 染 函数 中 的 内 容 ， 这 个 内 
容 可 以 称 为 代码 字符 串 。 

代码 字符 串 可 以 被 包装 在 函数 中 执行 ， 这 个 函数 就 是 我 们 通常 所 说 的 演 染 函数 。 

泻 染 函数 被 执行 之 后 , 可 以 生成 一 份 VNode , 而 虚拟 DOM 可 以 通过 这 个 VNode 来 演 染 视图 。 
关于 虚拟 DOM 如 何 使 用 VNode 泻 染 视图 ， 我 们 在 第 二 篇 中 已 经 介绍 过 。 

本 章 中 ,我 们 主要 讨论 如 何 使 用 AST 生成 代码 字符 串 。 

假设 现在 有 这 样 一 个 简单 的 模板 : 

81 «<div id="el">Hello {{name}}</div> 


它 转换 成 AST 并 且 经 过 优化 絮 的 优化 之 后 是 下 面 的 样子 : 


e1 

02 'type': 1， 

93 'tag': 'div', 

@4 "attrsList': [ 

@5 { 

66 name id', 
87 value el 

68 } 

69 ]， 

16 'attrsMap': { 

11 "id': "el' 

12 }, 

13 'children': [ 

14 

15 'type': 2， 

16 "expression': '"Hello "+_s(name)', 
17 'text': 'Hello {{name}}', 
18 'static': false 
19 } 

20 ]， 

21 plain': false， 

22 'attrs': [ 

23 

24 'name': "id', 
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26 } 

27 ]， 

28 'static': false， 

29 'staticRoot': false 
30 } 


代码 生成 器 可 以 通过 上 面 这 个 AST 来 生成 代码 字符 串 ， 生 成 后 的 代码 字符 串 是 这 样 的 : 
61 "with(this){return _c("div",{attrs:{"id":"el"}},[_v("Hello "+_s(name))])}' 
为 了 方便 观察 ， 格 式 化 后 是 这 样 的 : 


61 with (this) { 
62 return _c( 
63 "div", 


85 attrs:{"id": "el"} 
66 }, 


88 _v("Hello "+_s(name)) 
69 ] 

16 ) 

于 5 十 


仔细 观察 生成 后 的 代码 字符 串 ， 我 们 会 发 现 ， 这 其 实 是 一 个 舰 套 的 函数 调用 。 卫 数 _c 的 参 
数 中 执行 了 函数 _v， 而 函数 _v 的 参数 中 又 执行 了 函数 _s。 

代码 字符 串 中 的 _c 其 实 是 createElement 的 别名 。createElement 是 虚拟 DOM 中 所 提供 
的 方法 ， 它 的 作用 是 创建 虚拟 节点 ， 有 三 个 参数 ， 分 别 是 


口 标签 名 

口 一 个 包含 模板 相关 属性 的 数据 对 象 

口 子 节 点 列表 

调用 createElement 方法 ， 我 们 可 以 得 到 一 个 VNode。 

这 也 就 知道 了 泻 染 函 数 可 以 后 成 VNode 的 原因 : 泻 染 函数 其 实 是 执行 了 createElement, 而 


createElement 可 以 创建 一 个 VNode。 


11.1 通过 AST 生 成 代码 字符 串 
生成 代码 字符 串 是 一 个 递归 的 过 程 ， 从 顶 向 下 依次 处 理 每 一 个 AST 节点 。 
节点 有 三 种 类 型 ， 分 别 对 应 三 种 不 同 的 创建 方法 与 别名 ， 如 表 11-1 所 示 。 
表 11-1 三 种 节点 对 应 的 创建 方法 与 别名 


类 型 创建 方法 别 名 
元 素 节点 createElement _c 
文本 节点 createTextVNode Vv 


注释 节点 createEmptyVNode e 
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在 递归 的 过 程 中 ， 每 处 理 一 个 AST 节点 ， 就 会 生成 一 个 与 节点 类 型 相对 应 的 代码 字符 串 。 
如 果 节 点 是 元 素 节 点 ， 那 么 代码 字符 串 是 这 样 的 : 
61 _c(<tagname>, <data>, <children>) 


元 素 节 点 通常 有 子 节点 ， 当 人 处理 它 的 子 节点 时 ,创建 出 来 的 代码 字符 串 会 放 在 上 面 例子 中 
<children> 的 位 置 。 


例如 : 

81 «<div id="el"> 

02 <div> 

63 <p>Hello {{name}}</p> 
64 </div> 

65 </div> 


上 面 这 样 简单 的 模板 ， 它 的 AST 如 图 11-1 所 示 。 


11-1 模板 的 AST 示 意图 
使 用 AST 生成 代码 字符 串 时 ， 最 先生 成 根 节点 div。 
生成 后 是 这 样 的 : 
61 _c('div', {attrs: {"id": "el"}}) 


然后 继续 生成 它 的 子 节点 ， 生 成 出 来 的 子 节 点 字符 串 会 放 在 _c 函数 第 三 个 参数 的 位 置 ， 如 
图 11-2 所 示 。 
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子 节点 字符 串 
插入 在 这 里 


"_c("div", {attrs: {"id":"el"}})' 
图 11-2 子 节点 字符 串 插 入 的 位 置 
在 前 面 的 例子 中 ， 根 节点 div 下 面 又 是 一 个 div 节点 ， 所 以 会 再 次 生成 一 个 div 节点 放 在 
图 11-2 所 示 的 位 置 。 生 成 后 的 代码 字符 串 如 下 : 


61 _c('div',{attrs:{"id":"el"}},[_c('div')]) 


可 以 看 到 , 在 _c 的 第 三 个 参数 位 置 ， 多 了 一 个 数组 ， 里 面 又 有 一 个 _c。 这 段 代 码 的 结构 如 
图 11-3 所 示 。 


节点 名 ， 节点 属性 ，， 子 节点 列表 
_c('div’ {attrs: {"id":"el"}},[_c('div’')]) 
节点 名 


图 11-3 ”代码 字符 串 的 结构 图 
在 模板 中 , 第 二 个 div 节点 下 面 是 一 个 p 节点 , 所 以 会 生成 一 个 p 节点 的 代码 字符 串 , 如 下 : 
61 _c('p') 
这 段 代码 字符 串 会 放 在 如 图 11-4 所 示 的 位 置 。 


市 点 名 节点 属性 ， 了 市 点 列表 _ 
_c('div’',{attrs:{"id":"el"}},[_c('div')]) 
节点 名 


p 节 点 的 代码 字符 串 
插入 在 这 


图 11-4 ”代码 字符 串 即 将 插入 的 位 置 
当 这 一 小 段 p 节点 的 代码 字符 串 被 插入 到 整体 代码 字符 串 中 之 后 ， 是 下 面 这 个 样子 : 
61 _c('div',{attrs:{"id":"el"}},[_c('div',[_c('p')])]) 

这 段 代码 字符 串 的 结构 如 图 11-5 所 示 。 


区 点 名 节点 属性 子 节点 列表 
_c('div’ {attrs: {"id":"el"}}, [a cl ‘div [cf 人 ‘pp "1)]) 
节点 名 节点 名 
子 节点 列表 


图 11-$ 代码 字符 串 的 结构 图 2 
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p 节点 下 面 是 一 个 带 变 量 的 文本 ， 生 成 的 代码 字符 串 如 下 : 


_v("Hello "+_s(name)) 


01 
同样 ， 它 会 插入 到 p 节点 的 子 节 点 列表 的 位 置 ， 如 图 11-6 所 示 。 


文本 节点 的 代码 
字符 串 播 入 在 这 里 
节点 名 ， 节点 属性 和 子 节点 列表 : 
_c('div',{attrs:{"id":"el"}},[_c('div',[_c('p")])]) 
节点 名 节点 名 
子 节点 列表 


图 11-6 文本 节点 即将 插入 的 位 置 


插入 之 后 的 代码 字符 串 如 下 : 


_c('div',{attrs:{"id":"el"}},[_c('div',[_c('p',[_v("Hello "+_s(name))])])]) 


61 
它 的 结构 如 图 11-7 所 示 。 
市 点 名 ， 节点 属性 子 节点 列表 | 
cl'div',{attrs:{"id":"el"}},[_c('div',[_c('p',[_v("Hello"+ s(name))])])]) 
ee 文本 所 点 
,市 点 名 子 节点 列表 ， 
子 节点 列表 


上 1 
节点 名 


图 11-7 代码 字符 串 的 结构 图 3 


当 递 归结 束 时 ， 我 们 就 可 以 得 到 一 个 完整 的 代码 字符 串 。 这 上 段 代 码 字 符 串 会 被 包 右 在 with 


语句 中 ， 其 伪 代 码 如 下 : 
81 ‘with(this){return ${code}} 
符 8 


在 代码 中 ，code 是 我 们 通过 递归 得 到 的 完整 的 代码 字 


Ba 


。 代 码 生成 器 的 作用 就 是 生成 上 


面 伪 代 码 中 所 展示 的 一 段 字 符 串 
那么 ， 代 码 生 成 器 是 如 何 生成 这 些 字符 上 


11.2 ”代码 生成 器 的 原理 
节点 有 不 同 的 类 型 ， 例 如 元 素 节点 、 文 本 节点 和 注释 节点 。 
不 同类 型 节点 的 生成 方式 是 不 一 样 的 ， 下 面 我 们 分 别 介 绍 如何 生 成 每 个 类 型 的 节点 。 


O 


的 呢 ? 


11.2.1 元 素 节 点 
守 串 ， 相 关 代码 如 下 : 


p 


生成 元 素 节 点 ， 其 实 就 是 生成 一 个 _c 的 函数 调用 字符 上 
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61 function genElement (el, state) { 
62 // 如 果 el.plain 是 true， 则 说 明 节 点 没有 属性 


83 const data = el.plain ? undefined : genData(el, state) 
084 

85 const children = genChildren(el, state) 

66 code = . _c('$f{el.tag}'${ 

67 data ? .,${data} : '' // data 

88 }${ 

89 children ? ~ ,${children} : '' // children 

10 ]) 

11 return code 

12 } 


代码 中 el 的 plain 属性 是 在 编译 时 发 现 的 ,如 果 节 点 没有 属性 ,就 会 把 plain 设置 为 true。 
这 里 我 们 可 以 通过 plain 来 判断 是 否 需 要 获取 节点 的 属性 数据 。 

代码 中 的 主要 逻辑 是 用 genData 和 genChildren 分 别 获取 data 和 children， 然 后 将 它们 
分 别 拼 到 字符 串 中 指定 的 位 置 ， 最 后 把 拼 好 的 "_c(tagName，data，children)" 返回 ， 这 样 一 
个 元 素 节 点 的 代码 字符 串 就 生成 好 了 。 


data 和 children 也 是 字符 串 ， 那 么 它们 是 如 何 生成 的 呢 ? 
我 们 先 看 data 是 如 何 生成 的 : 


61 function genData (el: ASTElement, state: CodegenState): string { 
62 let data = '"{" 

83 // key 

84 if (el.key) { 

85 data +=“Kkey:$fel.key}， 

66 } 

67 // ref 

88 if (el.ref) { 


69 data += “ref:${el.ref},. 

16 } 

11 // pre 

12 if (el.pre) { 

13 data += “pre:true,. 

14 } 

15 // 类 似 的 还 有 很 多 种 情况 

16 data = data.replace(/,$/, "')+ "'}" 
17 return data 

18 } 


其 实 也 是 拼 字符 串 。 先 给 data 赋值 一 个 '{' ， 然 后 发 现 节点 存在 哪些 属性 数据 ， 就 将 这 些 
数据 拼接 到 data 中 ， 最 后 拼接 一 个 '}' ， 此 时 一 个 完整 的 data 就 拼 好 了 。 

生成 子 节点 列表 字符 串 的 逻辑 也 是 拼 字符 串 。 通 过 循环 子 节 点 列表 , 根据 不 同 的 子 节 点 类 3 
生成 不 同 的 节点 字符 串 并 将 其 拼接 到 一 起 ， 具 体 实现 如 下 : 


61 function genChildren (el, state) { 


潜 


62 const children = el.children 
83 if (children.length) { 
84 return “[${children.map(c => genNode(c, state)).join(',')}] 


65 } 
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e6 } 

e7 

68 function genNode (node, state) { 
69 if (node.type === 1) { 

16 return genElement(node, state) 
1 } if (node.type === 3 && node.isComment) { 
12 return genComment(node) 

13 } else { 

14 return genText(node) 

15 } 

16 } 


从 代码 中 可 以 看 到 , 通过 循环 子 节点 列表 , 然后 分 别 调用 不 同 节 点 类 型 的 生成 方法 来 生成 字 
符 串 ， 最 后 将 其 拼接 到 一 起 并 返回 。 

这 其 实 是 一 个 递归 逻辑 。 如 果子 节点 存在 子 节 点 ,那么 会 重复 这 个 过 程 来 生成 子 节 点 的 子 节 点 。 

从 代码 中 可 以 看 到 , 生成 子 节 点 时 , 会 根据 其 类 型 的 不 同调 用 不 同 的 生成 方法 。 到 目前 为 止 ， 
我 们 只 介绍 了 元 素 节 点 生成 字符 串 的 原理 。 接 下 来 , 我们 将 介绍 如 何 生成 文本 节点 的 字符 串 以 及 


注释 节点 的 字符 串 。 


11.2.2 文本 节点 
生成 文本 节点 很 简单 ， 


我 们 只 需要 把 文本 放 在 _v 这 个 函数 的 参数 中 即 可 : 


01 function genText (text) { 

62 return ”_Vv(${text.type === 2 
03 ? text.expression 

84 : JSON.stringify(text.text) 
65 ]) 

66 } 


在 上 面 的 代码 中 ， 我 人 


] 会 把 文本 放 在 _v 的 参数 中 。 这 里 会 判断 文本 的 类 型 : 如 果 是 动态 文 


本 ， 则 使 用 expression; 如 果 是 静态 文本 ， 则 使 用 text。 
你 可 能 会 问 ， 为 什么 text 需要 使 用 JSON. stringify 方法 ? 


这 是 因为 expression 


中 的 文本 是 这 样 的 : 


61 '"Hello "+_s(name) 


而 text 中 的 文本 是 这 样 的 : 


01 "Hello Berwin" 


而 我 们 希望 静态 文本 是 这 样 的 : 


61 '"Hello Berwin"， 


字符 串 ， 例 如 : 


有 JSON.stringify 方法 。 因 为 JSON.stringify 可 以 给 文本 包装 一 层 


@1 JSON.stringify('Hello') // "'Hello'" 


11.2.3 注释 节点 
注释 节点 与 文本 节点 相同 ， 只 需要 把 文本 放 在 _e 的 参数 中 即 可 ， 其 代码 如 下 : 


61 function genComment (comment) { 
682 return ”_e(${JSON.stringify(comment.text)}) 
63 } 


在 上 面 的 代码 中 ,我 们 把 注释 拼接 到 函数 _e 的 参数 中 。 


11.3 总结 


本 章 中 , 我 们 介绍 了 代码 生成 器 的 作用 及 其 内 部 原理 ,了 解 了 代码 生成 器 其 实 就 是 字符 串 拼 
接 的 过 程 。 通 过 递归 AST 来 生成 字符 串 ， 最 先生 成 根 节点 ， 然 后 在 子 节点 字符 串 生成 后 ， 将 其 
拼接 在 根 节点 的 参数 中 ,， 子 节点 的 子 节 点 拼接 在 子 节点 的 参数 中 , 这 样 一 层 一 层 地 拼接 ,直到 最 
后 拼接 成 完整 的 字符 串 。 

同时 还 介绍 了 三 种 类 型 的 节点 , 分 别 是 元 素 节 点 、 文 本 节点 与 注释 节点 。 而 不 同类 型 的 节点 
生成 字符 串 的 方式 是 不 同 的 。 

最 后 ， 我 们 介绍 了 当 字符 串 拼 接 好 后 ， 会 将 字符 串 拼 在 with 中 返回 给 调用 者 。 


整体 流程 


前 几 篇 介绍 的 是 Vue.js 在 实现 一 些 功 能 时 所 要 用 到 的 技术 ， 其 内 容 俩 底层 。 

在 本 篇 中 ， 我们 更 多 的 是 介绍 距离 用 户 比 较 近 的 内 容 ， 例 如 使 用 Vuejs 开发 项 目 时 常用 的 
API、 模板 中 的 各 种 指令 、 组 件 里 经 常 使 用 的 生命 周期 钩子 以 及 使 用 事件 进行 父子 组 件 间 的 通信 。 
此 外 ， 我 们 还 会 定义 一 些 Vue.js 插件 和 过 滤器 。 

本 篇 中 ,我 们 主要 讲解 常用 功能 的 内 部 原理 ， 同 时 还 会 介绍 Vue.js 的 架构 设计 和 代码 结构 ， 
也 会 讨论 如 何 组 建 Vuejs 这 样 的 开源 项 目的 代码 等 内 容 。 

在 开发 一 些 很 复杂 的 功能 时 , 在 某 些 特定 的 场景 下 ,本 篇 所 介绍 的 内 容 一 定 会 对 我 们 有 帮助 。 

如 果 熟 悉 所 使 用 功能 的 内 部 实现 , 那么 当 业务 功能 出 现 bug 时 , 我 们 就 可 以 快速 、 精 准 地 定 
位 问题 所 在 ,知道 问题 是 由 Vue.js 的 某 些 特性 导致 的 , 还 是 代码 逻辑 有 问题 。 并 且 在 开发 复杂 功 
能 时 , 我 们 可 以 清楚 地 知道 Vue.js 能 提供 的 能 力 的 边界 在 哪里 , 这 样 就 可 以 最 大 限度 地 发 挥 它 的 
价值 。 


来 构 设 计 与 项 目 结构 


本 章 将 介绍 Vuejs 的 架构 设计 和 项 目 结构 , 我 们 会 从 宏观 的 角度 了 解 它 内 部 的 运行 原 到 


时 了 解 其 代码 是 如 何 组 建 起 来 的 。 


12.1 目录 结构 


Vuejs 的 目录 结构 如 下 : 


scripts 
-一 dist 
—— flow 
一 packages 


—— test 

| 一 src 

-一 compiler 

| 一 core 
| observer 

vdom 

上 ; instance 
[六 global-api 
[一 components 

| 一 servenr 

[一 platforms 

[一 sfc 

— shared 

— types 

— test 


并 闪闪 # 


并 闪闪 并 并 并 半音 间 间 并 间 音 闪 寺 


HH 
可 


与 构建 相关 的 脚本 和 配置 文件 
构建 后 的 文件 

Flow 的 类 型 声明 
vue-server-renderer 和 vue-template-compiler， 它 们 作为 单独 的 
NPM 包 发 布 

所 有 的 测试 代码 

源 代码 

与 模板 编译 相关 的 代码 

通用 的 、 与 平台 无 关 的 运行 时 代码 
实现 变化 侦 测 的 代码 

实现 虚拟 DOM 的 代码 

Vue.js 实例 的 构造 函数 和 原型 方法 
全 局 API 的 代码 

通用 的 抽象 组 件 

与 服务 端 澄 当 相 关 的 代码 

特定 平台 代码 

单 文件 组 件 (* .vue 文件 ) 解析 逻辑 
整个 项 目的 公用 工具 代码 
TypeScript 类 型 定义 

类 型 定义 测试 


packages 目录 中 包含 的 vue-server-renderer 和 vue-template-compiler 会 作为 单独 的 NPM 包 发 


布 ， 自 动 从 源码 中 生成 ,并 且 始 终 


与 Vue.js 具有 相同 的 版 本 。 


src/compiler 目录 下 的 代码 逻辑 与 我 们 在 第 8 章 中 介绍 的 内 容 一 至 
src/eore 目录 下 是 Vuejs 的 核心 代码 ， 这 部 分 逻辑 是 与 平台 无 关 的 ， 也 就 是 说 ， 它 们 可 以 在 


任何 JavaScript 环境 下 运行 ， 


比如 浏览 器 、Node.js 或 者 嵌入 在 原生 应 用 中 。 


src/platforms 目录 中 包含 特定 平台 的 代码 ， 跨 平台 相关 的 代码 也 会 放 在 这 里 。 
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dist 存放 构建 后 的 文件 , 在 这 个 目录 下 你 会 找到 很 多 不 同 的 Vuejs 构建 版 本 , 表 12-1 列 出 了 
它们 之 间 的 区 别 。 


表 12-1 不 同 的 Vue.js 构建 版 本 的 区 别 


UMD CommonJS ES Module 
完整 版 vue.js vue.common.js vue.esm.js 
只 包含 运行 时 版 本 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js 
完整 版 (生产 环境 ) vue.min.js 
只 包含 运行 时 版 本 ( 生产 环境 ) vue.runtime.min.js 


下 面 简单 介绍 一 下 表 12-1。 

D 完整 版 : 构建 后 的 文件 同时 包含 编译 器 和 运行 时 。 

口 编译 器 : 负责 将 模板 字符 串 编 译 成 JavaScript 演 染 函 数 ， 这 部 分 内 容 在 第 三 篇 中 介绍 过 。 

口 运行 时 : 负责 创建 Vue.js 实 例 ， 泻 染 视 图 和 使 用 虚拟 DOM 实现 重新 泻 染 ， 基 本 上 包含 除 

编译 器 外 的 所 有 部 分 。 

口 UMD: UMD 版 本 的 文件 可 以 通过 <script> 标签 直接 在 浏览 器 中 使 用 。jsDelivr CDN 提 
供 的 可 以 在 线 引 入 Vuejs 的 地 址 (https:/cdn.jsdelivrnetnpm/vue )， 就 是 运行 时 + 编译 器 的 
UMD 版 本 。 

口 CommonJS: CommonJS 版 本 用 来 配合 较 旧 的 打包 工具 ， 比 如 Browserify 或 webpack 1， 这 

些 打包 工具 的 默认 文件 (pkgmain ) 只 包含 运行 时 的 CommonJS 版 本 ( vueruntimecommonjs ) 。 

口 ES Module: ES Module 版 本 用 来 配合 现代 打包 工具 ， 比 如 webpack 2 或 Rollup， 这 些 打 
包工 具 的 默认 文件 (pkg.module ) 只 包含 运行 时 的 ES Module 版 本 (vue.runtime.esm.js ) 。 

1. 运行 时 + 编译 器 与 只 包含 运行 时 

如 果 需 要 在 客户 端 编译 模板 ( 比如 传人 一 个 字符 串 给 template 选项 ， 或 挂 载 到 一 个 元 素 上 
并 以 其 DOM 内 部 的 HTML 作为 模板 )， 那 么 需要 用 到 编译 器 ， 因 此 需要 完整 版 : 

61  // 需要 编译 器 

62 new Vue({ 


83 template: '<div>{{ hi }}</div>" 
e4 }) 


866 // 不 需要 编译 器 
867 new Vue({ 


88 render (h) { 

89 return h('div', this.hi) 
16 } 

11 }) 


当 使 用 vue-loader 或 vueify 的 时 候 ,*.vue 文 件 内 部 的 模板 会 在 构建 时 预 编译 成 JavaScript。 
所 以 ， 最终 打包 完成 的 文件 实际 上 是 不 需要 编译 右 的 ， 只 需要 引入 运行 时 版 本 即 可 。 

由 于 运行 时 版 本 的 体积 比 完整 版 要 小 30% 左 右 , 所 以 应 该 尽 可 能 使 用 运行 时 版 本 。 如 果 仍 然 
希望 使 用 完整 版 ， 则 需要 在 打包 工具 里 配置 一 个 别名 。 
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对 于 webpack， 需 要 这 人 么 处 理 : 


@1 module.exports = { 

602 // 

03 resolve: { 

@4 alias: { 

65 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 
66 } 

67 } 

68 } 


对 于 Rollup ， 需 要 这 么 处 理 : 

91 const alias = require('rollup-plugin-alias') 
63 rollup({ 

04 /1 

65 plugins: [ 

66 alias({ 

87 'vue': 'vue/dist/vue.esm.js’' 


68 }) 
69 ] 


10 }) 
对 于 Browserify， 需 要 添加 到 项 目的 package.json 中 : 


03 "browser": { 

64 "vue": "vue/dist/vue.common.js" 
@5 } 

66 } 


2. 开发 环境 与 生产 环境 模式 

对 于 UMD 版 本 来 说 ， 开 发 环境 和 生产 环境 二 者 的 模式 是 硬 编码 的 : 开发 环境 下 使 用 未 压缩 
的 代码 ， 生 产 环境 下 使 用 压缩 后 的 代码 。 

CommonJS 和 ES Module 版 本 用 于 打包 工具 ， 因 此 Vuejs 不 提供 压缩 后 的 版 本 ， 需 要 自行 将 
最 终 的 包 进 行 压 缩 。 此 外 , 这 两 个 版 本 同时 保留 原始 的 process .env .NODE_ENV 检测 , 来 决定 它 
们 应 该 在 什么 模式 下 运行 。 我 们 应 该 使 用 适当 的 打包 工具 配置 来 蔡 换 这 些 环境 变量 ， 以 便 控 制 
Vue.js 所 运行 的 模式 。 把 process.env.NODE_ENV 替换 为 字符 串 字 面 量 ， 同 时 让 UglifyJS 之 类 的 
压缩 工具 完全 删除 仅 供 开发 环境 的 代码 块 ， 从 而 减少 最 终 文 件 的 大 小 。 

在 webpack 中 ， 我 们 使 用 DefinePlugin: 


61 var webpack = require('webpack') 


92 

63 “ module.exports = { 

04 /1 

65 plugins: [ 

66 /fe 

67 new webpack.Defineplugin({ 
68 "process.env ': { 


69 NODE_ENV: JSON.stringify('production') 
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1 }) 
12 ] 
13 } 


在 Rollup 中 ， 我 们 使 用 rollup-plugin-replace: 


61 const replace = require('rollup-plugin-replace') 


02 

863 rollup({ 

064 /fe 

85 plugins: [ 

66 replace({ 

87 'process.env.NODE_ENV': JSON.stringify('production') 
88 }) 

69 


] 
10 }).then(...) 


在 Browserify 中 ， 应 用 一 次 全 局 的 envify 转换 : 


61 $ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js 


12.2 ”架构 设计 

上 一 节 中 我 们 介绍 了 Vuejjs 的 目录 结构 , 本 节 中 我 们 将 介绍 它 的 架构 设计 ， 了 解 如 何 组 织 像 
Vue.js 这 样 的 开源 项 目 代 码 。 

12-1 给 出 了 Vuejjs 的 整体 结构 ， 我 们 可 以 看 到 它 整 体 分 为 三 个 部 分 : 核心 代码 、 跨 平台 
相关 和 公用 工具 函数 (这 部 分 是 一 些 辅助 函数 ， 不 再 单独 介绍 )。 同 时 ， 其 架构 是 分 层 的 ， 最 底 
层 是 一 个 普通 的 构造 瑞 数 ， 最 上 层 是 一 个 人 口 ， 也 就 是 将 一 个 完整 的 构造 函数 导出 给 用 户 使 用 。 


入 口 Web 平 台 入 口 Weex 平 台 入 口 
泻 染 服务 端 泻 染 编译 器 
平台 Web 特 有 的 内 容 Weex 特 有 的 内 容 
核心 代码 shared 
全 局 API set delete nextTick Use | | .co 
prototype init state events lifecycle render 
构造 函数 Vue 构造 函数 


图 12-1 程序 结构 
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在 最 底层 和 最 顶层 中 间 , 我 们 需要 逐渐 添加 一 些 方 法 和 属性 , 而 构造 函数 上 一 层 的 一 些 方法 
会 最 终 添 加 到 构造 函数 的 prototype 属性 中 ， 再 上 一 层 的 方法 最 终 会 添加 到 构造 函数 上 ， 这 些 
方法 叫 作 全 局 API ( Global API ), 例如 Vue.use。 也 就 是 说 ， 先 在 构造 函数 的 prototype 属性 中 
添加 方法 后 ， 再 向 构造 函数 自身 添加 全 局 API。 再 往 上 一 层 是 与 跨 平台 相关 的 内 容 。 在 构建 时 ， 
首先 会 选择 一 个 平台 , 然后 将 特定 于 这 个 平台 的 代码 加 载 到 构建 文件 中 。 再 上 一 层 是 演 染 层 ,其 
中 包含 两 部 分 内 容 : 服务 端 泻 染 相关 的 内 容 和 编译 吉 相 关 的 内 容 。 同时, 这 一 层 的 内 容 是 可 选 的 ， 
构建 时 会 根据 构建 的 目标 文件 来 选择 是 否 需 要 将 编译 器 加 载 进 来 。 事实 上 , 这 一 层 并 不 权威 ， 因 
为 服务 端 泻 染 相 关 的 代码 只 存在 于 Web 平台 下 ， 而 且 这 两 个 平台 有 各 自 的 编译 器 配置 。 这 里 之 
所 以 把 它们 放 到 泻 染 层 ， 是 因为 它们 都 是 与 泻 染 相关 的 内 容 。 

上 一 节 中 我 们 介绍 了 dist 目录 下 很 多 不 同 的 Vue.js 构建 版 本 ,这 些 版 本 中 有 的 只 包含 运行 时 ， 
有 的 是 完整 版 的 。 如 果 构 建 只 包含 运行 时 代码 的 版 本 ， 就 不 会 将 泻 染 层 中 编译 器 部 分 的 代码 加 载 
进来 。 

最 顶层 是 入 口 , 也 可 以 叫 作 出 口 。 对 于 构建 工具 和 Vuejs 的 使 用 者 来 说 , 这 是 入 口 ; 对 于 Vuejs 
自身 来 说 ， 这 是 出 口 。 在 构建 文件 时 ， 不 同 平台 的 构建 文件 会 选择 不 同 的 入 口 进行 构建 操作 。 


从 整体 结构 上 看 ,下 面 三 层 的 代码 是 与 平台 无 关 的 核心 代码 ,上 面 三 层 是 与 平台 相关 的 代码 。 
因此 ， 整 个 程序 结构 还 可 以 用 男 一 种 表现 形式 来 展现 ， 如 图 12-2 所 示 。 


入 口 


人 


Web 平 台 入 口 Weex 平 台 入 口 


I 


通用 的 编译 器 + 平台 特有 的 参数 


2 


Web Weex 
平台 特有 的 平台 特有 的 


跨 平台 相关 


核心 代码 


图 12-2 ”程序 结构 2 
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从 图 12-2 可 以 看 到 ， 不 同 平台 有 不 同 的 入 口 ， 有 一 些 特定 于 平台 的 代码 会 加 载 到 这 部 分 ， 
而 底层 的 核心 代码 是 通用 的 ， 可 以 在 任何 平台 下 运行 。 

这 里 以 构建 Web 平台 下 运行 的 文件 为 例 ， 如 果 我 们 构建 的 是 完整 版 本 ， 那 么 会 选择 Web 平 
台 的 人 口 文件 开始 构建 ， 这 个 人 口 文件 最 终 会 导出 一 个 Vue 构造 函数 。 在 导出 之 前 ,会 向 Vue 
构造 函数 中 面 添 加 一 些 方法 ， 其 流程 是 : 先 向 Vue 构造 函数 的 prototype 属性 上 添加 一 些 方法 ， 
然后 向 Vue 构造 函数 自身 添加 一 些 全 局 API, 接着 将 平台 特有 的 代码 导入 进来 , 最 后 将 编译 屁 导 
入 进来 。 最 终 将 所 有 代码 同 Vue 构造 函数 一 起 导出 去 。 
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本 章 从 全 局 的 角度 介绍 了 Vuejs 内 部 的 各 个 功能 是 如 何 组 织 在 一 起 的 , 其 中 依次 介绍 了 它 的 
目录 结构 和 架构 设计 。 在 目录 结构 中 , 我们 详细 说 明了 每 个 目录 的 作用 ， 并 详细 介绍 了 dist 目录 
下 不 同 构建 文件 之 间 的 区 别 。 


在 架构 设计 中 , 我 们 介绍 了 Vuejs 在 大 体 上 可 以 分 三 部 分 : 核心 代码 、 跨 平台 相关 与 公用 工 
具 函 数 。 核 心 代码 包含 原型 方法 和 全 局 API， 它 们 可 以 在 各 个 平台 下 运行 ， 而 跨 平 台 相 关 的 部 分 
更 多 的 是 泻 染 相关 的 功能 ， 不 同 平台 下 的 泻 染 API 是 不 同 的 。 以 Web 平台 为 例 ，Web 页 面 中 的 
泻 染 操 作 就 是 操作 DOM ， 所 以 在 跨 平 台 的 Web 环境 下 对 DOM 操作 的 API 进 行 了 封装 ， 这 个 封 
装 主要 与 虚拟 DOM 对 接 ,而 虚拟 DOM 中 所 使 用 的 各 种 节点 操作 其 实 是 调用 路 平台 层 封装 的 API 
接口 。 而 Weex 平台 对 节点 的 操作 与 Web 平台 并 不 相同 。 


上 一 章 介绍 了 Vue.js 内 部 的 整体 结构 ,知道 了 它 会 向 构造 函数 添加 一 些 忆 
我 们 将 详细 介绍 它 的 实例 方法 和 全 局 API 的 实现 原理 。 


在 
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实例 方法 与 全 局 API 赐 实现 
原理 


性 和 方法 。 本 章 中 ， 


Vue.js 内 部 ， 有 这 样 一 段 代码 : 


import { initMixin } from './init" 
import { stateMixin } from './state"' 


import { renderMixin } from './render' 
import { eventsMixin } from './events' 
import { lifecycleMixin } from './lifecycle"' 
import { warn } from '../util/index' 
function Vue (options) { 
if (process.env.NODE_ENV !== 'production' && 
!(this instanceof Vue) 
) { 
warn('Vue is a constructor and should be called with the ‘new keyword') 
} 
this._ init(options) 
} 
initMixin(Vue) 
stateMixin(Vue) 
eventsMixin(Vue) 
lifecycleMixin(Vue) 
renderMixin(Vue) 


export default Vue 


其 中 定义 了 Vue 构造 函数 , 然后 分 别 调用 了 initMixin、stateMixin、eventsMixin、 lifecycleMixin 
和 renderMixin 这 5 个 函数 ， 并 将 Vue 构造 函数 当 作 参 数 传 给 了 这 5 个 函数 。 


这 5 个 函数 的 作用 就 是 向 Vue 的 原型 中 挂 载 方法 。 以 函数 initMixin 为 例 ， 它 的 实现 方式 是 


的 


81 
82 


洲 
入 


export function initMixin (Vue) { 
Vue.prototype._init = function (options) { 
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63 // 做 些 什么 

65 } 

可 以 看 到 ， 当 函数 initMixin 被 调用 时 ， 会 向 Vue 构造 函数 的 prototype 属性 添加 _init 
方法 。 执 行 new Vue() 时 ， 会 调用 _init 方法 ， 该 方法 实现 了 一 系列 初始 化 操作 ， 包 括 整 个 生命 
周期 的 流程 以 及 响应 式 系 统 流程 的 启动 等 。 关 于 _init 的 初始 化 流程 ， 我 们 会 在 第 14 章 中 详细 
介绍 

其 他 4 个 函数 也 是 如 此 ， 只 是 它们 会 在 Vue 构造 函数 的 prototype 属性 上 挂 载 不 同 的 方法 
而 已 。 


13.1 数据 相关 的 实例 方法 


与 数据 相关 的 实例 方法 有 3 个 ， 分 别 是 vm.$watch、vm.$set 和 vm.$delete， 它 们 是 在 
stateMixin 中 挂 载 到 Vue 的 原型 上 的 ， 代 码 如 下 : 


61 import { 


62 set， 
83 del 

64 } from '../observer/index' 

85 

86 export function stateMixin (Vue) { 

87 Vue.prototype.$set = set 

88 Vue.prototype.$delete = del 

69 Vue.prototype.$watch = function (expOrFn, cb, options) {} 
10 } 


可 以 看 到 ， 当 stateMixin 被 调用 时 ,会 向 Vue 构造 函数 的 prototype 属性 挂 载 上 面 说 的 3 
个 与 数据 相关 的 实例 方法 。 
关于 这 3 个 方法 的 内 部 原理 ， 我 们 已 经 在 第 4 章 中 详细 介绍 过 ， 这 里 不 再 歼 述 。 


13.2 事件 相关 的 实例 方法 


与 事件 相关 的 实例 方法 有 4 个 ， 分 别 是 : vm.$on、vm.$once、vm.$off 和 vm.$emit。 这 4 
个 方法 是 在 eventsMixin 中 挂 载 到 Vue 构造 函数 的 prototype 属性 中 的 ， 其 代码 如 下 : 


61 export function eventsMixin (Vue) { 


82 Vue.prototype.$on = function (event, fn) { 
63 // 做 点 什么 

64 } 

85 

66 Vue.prototype.$once = function (event, fn) { 
67 // 做 点 什么 

68 } 

69 

16 Vue.prototype.$off = function (event, fn) { 


11 // 做 点 什么 
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12 } 

13 

14 Vue.prototype.$emit = function (event) { 
15 // 做 点 什么 

16 } 

和 ”二 


可 以 看 到 ， 当 eventsMixin 被 调用 时 ， 会 向 Vue 构造 函数 的 prototype 属性 添加 4 个 实例 
方法 。 这 4 个 方法 在 用 Vue.js 开发 应 用 时 经 常用 到 ， 下 面 我 们 将 详细 介绍 它们 的 实现 原理 。 


13.2.1 vm.$on 
这 里 我 们 先 简 单 回顾 一 下 vm.$on 的 用 法 : 


61 vm.$on(event, callback) 

口 参数 : 
m {string | Array<string>} event 
@m {Function} callback 


口 用 法 : 监听 当前 实例 上 的 自 定义 事件 ， 事件 可 以 由 vm.$emit 触发 。 回 调 函 数 会 接收 所 
有 传人 事件 所 触发 的 函数 的 额外 参数 。 


口 示例 : 
61 vm.$on('test', function (msg) { 
82 console.log(msg) 
e3 })) 


@4 vm.$emit('test', 'hi') 
65 // => "hi" 


下 面 我 们 将 详细 介绍 它 的 内 部 原理 。 
事件 的 实现 方式 并 不 难 , 只 需要 在 注册 事件 时 将 回调 函数 收集 起 来 , 在 触发 事件 时 将 收集 起 
来 的 回调 函数 依次 调用 即 可 。Vuejs 的 实现 方式 也 是 如 此 ， 其 代码 如 下 : 


91 Vue.prototype.$on = function (event, fn) { 


62 const vm = this 

63 if (Array.isArray(event)) { 

84 for (let i = 6，1 = event.length; i < 1; i++) { 

65 this.$on(event[i], fn) 

66 

67 } else { 

08 (vm._events[event] || (vm._events[event] = [])).push(fn) 
89 

16 return vm 

1 评 


在 上 面 的 代码 中 , 当 event 参数 为 数组 时 ,需要 遍历 数组 ,将 其 中 的 每 一 项 递归 调用 vm.gon， 
使 回调 可 以 被 注册 到 数组 中 每 项 事件 名 所 指定 的 事件 列表 中 。 当 event 参数 不 为 数组 时 , 就 向 事 
件 列表 中 添加 回调 。 通 俗 地 讲 ， 就 是 将 回调 注册 到 事件 列表 中 。 
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vm._events 是 一 个 对 象 , 用 来 存储 事件 ,在 代码 中 ,我 们 使 用 事件 名 ( event ) 从 vm._events 
中 取出 事件 列表 , 如 果 列 表 不 存在 , 则 使 用 空 数组 初始 化 , 然后 再 将 回调 函数 添加 到 事件 列表 中 。 

这 样 事件 就 注册 好 了 ， 我 们 可 能 会 有 一 个 疑惑 ，vm._events 是 哪儿 来 的 ? 事实 上 ， 在 执行 
new Vue() 时 ，Vue 会 执行 this._init 方法 进行 一 系列 初始 化 操作 ， 其 中 就 会 在 Vue.jjs 的 实例 
上 创建 一 个 _events 属性 ， 用 来 存储 事件 。 其 代码 如 下 : 


61 vm._events = Object.create(null) 


13.2.2 vm.$off 
同 理 ， 我 们 还 是 先 简单 回顾 它 的 用 法 : 


61 vm.$off([event, callback]) 


m {string | Array<string>} event 
@m {Function} callback 


口 用 法 : 移 除 自 定 义 事件 监 昕 器 。 


里 如 果 没 有 提供 参数 ， 则 移 除 所 有 的 事件 监听 器 。 
里 如 果 只 提供 了 事件 ， 则 移 除 该 事件 所 有 的 监听 天。 
@ 如 果 同 时 提供 了 事件 与 回调 ， 则 只 移 除 这 个 回调 的 监听 器 。 


通过 用 法 介绍 ， 我 们 知道 vm.goff 的 作用 是 移 除 自 定义 事件 ， 并 且 有 几 种 情况 需要 处 理 。 
首先 ， 我 们 需要 处 理 没有 提供 参数 的 情况 ， 此 时 需要 移 除 所 有 事件 的 监听 器 ， 其 代码 如 下 : 


61 Vue.prototype.$off = function (event, fn) { 


62 const vm = this 

63 // 移 除 所 有 事件 的 监听 器 

84 if (!arguments.length) { 

685 vm._events = Object.create(null) 
86 return vm 

67 } 

68 return vm 

89 


可 以 看 到 ， 这 里 有 一 个 判断 条 件 ， 当 arguments .length 为 0 时 ,说 明 没 有 任何 参数 ， 这 时 
需要 移 除 所 有 的 事件 监听 器 ， 因 此 我 们 重 置 了 vm._events 属性 。 前 面 介 绍 过 vm._events 属性 
存储 了 所 有 事件 ， 所 以 将 vm._events 重 置 为 初始 状态 就 等 同 于 将 所 有 事件 都 移 除 了 。 


由 于 vm.$off 的 第 一 个 参数 event 支持 数组 ， 所 以 接 下 来 需要 处 理 event 参数 为 数组 的 情 
况 ， 其 处 理 逻 辑 很 简单 ， 只 需要 将 数组 遍历 一 遍 ， 然 后 数组 中 的 每 一 项 依次 调用 vm.$off 即 可 。 
其 代码 如 下 : 


61 Vue.prototype.$off = function (event, fn) { 
82 const vm = this 
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63 // 移 除 所 有 事件 监听 器 
84 if (!arguments.length) { 
65 vm._events = Object.create(null) 
86 return vm 
67 } 
68 
69 // 新 增 代码 
16 // event 支持 数组 
了 if (Array.isArray(event)) { 
12 for (let i = 8, 1 = event.length; i < 1; i++) { 
13 this.$off(event[i], fn) 
14 } 
15 return vm 
16 } 
17 return vm 
18 } 


在 上 面 的 代码 中 ， 当 event 参数 为 数组 时 ， 遍 历 它 并 依次 调用 this.$off。 代 码 中 的 
this.$off 和 vm.$off 是 同一 个 方法 ，vm 是 this 的 别名 。 

接 下 来 , 我 们 需要 处 理 第 二 种 条 件 : 如 果 只 提供 了 事件 名 ， 则 移 除 该 事件 所 有 的 监听 器 。 实 
现 这 个 功能 并 不 复杂 ， 我们 只 需要 从 this._events 中 将 event 重 置 为 空 即 可 。 其 代码 如 下 : 


61 
82 
03 
04 
85 
86 
87 
98 
89 
16 
11 
12 
13 
14 
15 
16 
17 
18 
19. 
20 
21 
之 之 
23 
24 
pas 
26 
27 
28 


Vue.prototype.$off = function (event, fn) { 


} 


const vm = this 

// 移 除 所 有 事件 监听 器 

if (!arguments.length) { 
vm._events = Object.create(null) 
return vm 


} 


// event 支持 数组 
if (Array.isArray(event)) { 
for (let i = 60, 1 = event.length; i < 1; i++) { 
this.$off(event[i], fn) 
} 


return vm 


} 


// 新 增 代码 
const cbs = vm._events[event] 
if (!cbs) { 

return vm 


} 
// 移 除 该 事件 的 所 有 监听 器 


if (arguments.length === 1) { 
vm._events[event] = null 
return vm 

} 

return vm 


在 上 面 的 代码 中 , 首先 进行 一 个 安全 监测 。 如 果 这 个 事件 没有 被 监听 , 也 就 是 说 vm._events 
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中 找 不 到 任何 监听 器 ， 那 么 什么 都 不 需要 做 ， 直 接 退 出 程序 即 可 。 

然后 判断 是 否 只 有 一 个 参数 ， 如 果 是 ,将 事件 名 在 vm._events 中 的 所 有 事件 都 移 除 。 要 移 
除 该 事件 的 所 有 监听 器 ， 只 需要 将 vm._events 上 以 该 事件 名 为 属性 的 值 设 置 为 null 即 可 。 

接 下 来 处 理 最 后 一 种 情况 : 如 果 同 时 提供 了 事件 与 回调 ,那么 只 移 除 这 个 回调 的 监听 天 。 实 
现 这 个 功能 并 不 复杂 ， 只 需要 使 用 参数 中 提供 的 事件 名 从 vm._events 上 取出 事件 列表 ,然后 从 
列表 中 找到 与 参数 中 提供 的 回调 函数 相同 的 那个 函数 ， 并 将 它 从 列表 中 移 除 。 其 代码 如 下 : 


61 Vue.prototype.$off = function (event, fn) { 


02 const vm = this 

63 // 移 除 所 有 事件 监听 器 

84 if (!arguments.length) { 

85 vm._events = Object.create(null) 
866 return vm 

67 } 

68 

69 // event 支持 数组 

16 if (Array.isArray(event)) { 
11 for (let i = 6，1 = event.length; i < 1; i++) { 
12 this.$off(event[i], fn) 
13 } 

14 return vm 

15 } 

16 

17 const cbs = vm._events[event] 
18 if (!cbs) { 

19 return vm 

26 } 

21 // 移 除 该 事件 的 所 有 监听 器 

22 if (arguments.length === 1) { 
23 vm._events[event] = null 

24 return vm 

25 } 

26 


27 // 新 增 代 码 
28 // 只 移 除 与 fn 相同 的 监听 器 
29 if (fn) { 


36 const cbs = vm._events[event] 
31 let cb 

3 过 let i = cbs.length 

33 while (i--) { 

34 cb = cbs[i] 

35 if (cb === fn || cb.fn === fn) { 
36 cbs.splice(i, 1) 

37 break 

38 } 

39 } 

46 } 

41 return vm 

42 } 


这 里 我 们 先 判断 是 否 有 fn 参数 ， 有 则 说 明 用 户 同时 提供 了 event 和 fn 这 两 个 参数 。 然 后 
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从 vm._events 中 取出 事件 监听 需 列 表 并 遍历 它 ， 如 果 列 表 中 的 某 一 项 与 fn 相同 ,或 者 某 一 项 
的 fn 属性 与 fn 相同 , 说 明 已 经 找到 了 需要 删除 的 监听 器 (也 就 是 回调 函数 ), 这 时 使 用 splice 
方法 将 它 从 列表 中 移 除 即 可 。 当 循环 结束 后 ， 列 表 中 所 有 与 用 户 在 参数 中 提供 的 fn 相同 的 监听 
器 都 会 被 移 除 。 

这 里 有 一 个 细节 需要 注意 ， 在 代码 中 遍历 列表 是 从 后 向 前 循环 ， 这 样 在 列表 中 移 除 当前 位 
置 的 监听 顺 时 ， 不 会 影响 列表 中 未 遍历 到 的 监听 需 的 位 置 。 如 果 是 从 前 向 后 遍历 ， 那 么 当 从 列 
表 中 移 除 一 个 监听 需 时 ， 后 面 的 监听 融会 自动 向 前 移动 一 个 位 置 ， 这 会 导致 下 一 轮 循环 时 跳 过 
一 个 元 素 。 


13.2.3 vm.$once 
这 里 还 是 先 简 单 回顾 一 下 vm.$once 的 用 法 : 


91 vm.$once(event, callback) 
口 参数 : 


m {string | Array<string>} event 
@m {Function} callback 


口 用 法 : 监听 一 个 自 定 义 事件 ， 但 是 只 和 触发 一 次 ， 在 第 一 次 触发 之 后 移 除 监听 器 。 

通过 上 面 的 介绍 , 我 们 知道 vm.$once 和 vm.$on 的 区 别 是 vm.$once 只 能 被 触发 一 次 ,所 以 
实现 这 个 功能 的 一 个 思路 是 : 在 vm.$once 中 调用 vm.$on 来 实现 监听 自 定义 事件 的 功能 ， 当 自 
定义 事件 触发 后 会 执行 拦截 器 ， 将 监听 器 从 事件 列表 中 移 除 。 


有 具体 实现 如 下 : 

91 Vue.prototype.$once = function (event, fn) { 
62 const vm = this 

03 function on () { 

064 vm.$off(event, on) 

65 fn.apply(vm, arguments) 
66 

67 on.fn = fn 

68 vm.$on(event, on) 

89 return vm 

10 } 


可 以 看 到 ， 我 们 在 vm.$once 中 使 用 vm.$on 来 监听 事件 。 首 先 ， 将 函数 on 注册 到 事件 中 。 
当 自 定义 事件 被 触发 时 ， 会 先 执行 函数 on( 在 这 个 函数 中 ， 会 使 用 vm.$off(event, on) 将 自 定 
义 事件 移 除 ), 然 后 手动 执行 函数 fn, 并 将 参数 arguments 传递 给 函数 fn, 这 就 可 以 实现 vm.$once 
的 功能 。 

但 是 要 注意 on.fn = fn 这 行 代码 。 前 面 我 们 介绍 vm.$off 时 提 到 ， 在 移 除 监听 器 时 ， 需 要 
将 用 户 提供 的 监听 器 函数 与 列表 中 的 监听 器 函数 进行 对 比 , 相同 部 分 会 被 移 除 , 这 导致 当 我 们 使 
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用 拦截 器 代替 监听 咒 注 入 到 事件 列表 中 时 , 拦截 器 和 用 户 提供 的 函数 是 不 相同 的 , 此 时 用 户 使 用 
vm.$off 来 移 除 事件 监听 絮 ， 移 除 操作 会 失效 。 

这 个 问题 的 解决 方案 是 将 用 户 提供 的 原始 监听 器 保存 到 拦截 器 的 fn 属性 中 ， 当 vm.$off 方 
法 遍历 事件 监听 需 列 表 时 ， 同 时 会 检查 监听 器 和 监听 器 的 fn 属性 是 否 与 用 户 提 供 的 监听 器 函数 
相同 ， 只 要 有 一 个 相同 ， 就 说 明 需 要 被 移 除 的 监听 噩 被 找到 了 , 将 被 找到 的 拦截 器 从 事件 监听 天 
列表 中 移 除 即 可 。 

在 vm.$off 中 ， 我 们 会 检查 监听 器 〈cb ) 和 监听 器 的 fn 属性 是 否 与 用 户 提供 的 fn 相同 。 
有 这 样 的 判断 逻辑 : 


61 if (cb === fn || cb.fn === fn) { 
62 // 做 些 什么 
e3 } 


13.2.4 vm.$emit 
先 简单 回顾 一 下 vm.$emit 的 用 法 : 


61 vm.$emit( event, [...args] ) 
口 参数 : 
四 {string} event 
四 [...args] 
口 用 法 : 触发 当前 实例 上 的 事件 。 附 加 参数 都 会 传 给 监听 器 回调 。 
vm.gemit 的 作用 是 触发 事件 。 前 面 我 们 介绍 过 ， 所 有 的 事件 监听 器 回调 函数 都 会 存储 在 
vm._events 中 ， 所 以 触发 事件 的 实现 思路 是 使 用 事件 名 从 vm._events 中 取出 对 应 的 事件 监听 
器 回调 函数 列表 ， 然 后 依次 执行 列表 中 的 监听 器 回调 并 将 参数 传递 给 监听 器 回调 。 其 代码 如 下 : 


61 Vue.prototype.$emit = function (event) { 


82 const vm = this 

@3 let cbs = vm._events[event] 

64 if (cbs) { 

85 const args = toArray(arguments, 1) 

86 for (let i = 6，1 = cbs.length; i < 1; i++) { 
67 try { 

88 cbs[i].apply(vm, args) 

69 } catch (e) { 

16 handleError(e, vm, ‘event handler for "${event}+”…) 
11 } 

12 } 

13 } 

14 return vm 

15 } 


这 里 我 们 使 用 event 从 vm._events 中 取出 事件 监听 器 回调 函数 列表 ， 并 将 其 赋值 给 变量 
cbs。 如 果 cbs 存在 ， 则 循环 它 ， 依 次 调用 每 一 个 监听 器 回调 并 将 所 有 参数 传 给 监听 器 回调 。 
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toArray 的 作用 是 将 类 似 于 数组 的 数据 转换 成 真正 的 数组 , 它 的 第 二 个 参数 是 起 始 位 置 。 也 就 是 
说 ，args 是 一 个 数组 ， 里 面包 含 除 第 一 个 参数 之 外 的 所 有 参数 。 

同时 我 们 会 看 到 代码 中 使 用 try. . .catch 语句 来 捕获 事件 监听 器 回调 的 错误 。 当 监听 器 回 
调 发 生 错 误 时 ， 会 触发 handleError 图 数 ， 在 控制 台 打 印 出 错误 提示 。 同 时 ， 如 果 在 
Vue.config.errorHandler 配置 了 错误 处 理 函 数 ， 它 将 会 被 触发 。 


13.3 生命 周期 相关 的 实例 方法 


与 生命 周期 相关 的 实例 方法 有 4 个 ,分 别 是 vm.$mount、vm.$forceUpdate、vm.$nextTick 
和 vm.$destroy。 其 中 有 两 个 方法 是 从 1ifecycleMixin 中 挂 载 到 Vue 构造 汝 数 的 prototype 


时 性 上 的 ， 分 别 是 vm.$forceUpdate 和 vm.$destroy。1ifecycleMixin 的 代码 如 下 : 


@1 export function lifecycleMixin (Vue) { 


62 Vue.prototype.$forceUpdate = function () { 
63 // 做 点 什么 

64 } 

85 

66 Vue.prototype.$destroy = function () { 

67 // 做 点 什么 

68 } 

69 } 


vm.$nextTick 方法 是 从 renderMixin 中 挂 载 到 Vue 构造 函数 的 prototype 属性 上 的 。 
renderMixin 的 代码 如 下 : 


@1 export function renderMixin (Vue) { 


62 Vue.prototype.$nextTick = function (fn) { 
63 // 做 点 什么 

94 } 

85 } 


而 vm. $mount 方法 则 是 在 跨 平 台 的 代码 中 挂 载 到 Vue 构造 函数 的 prototype 属性 上 的 。 


13.3.1 vm.$forceUpdate 


vm.$forceUpdate() 的 作用 是 迫使 Vue.js 实例 重新 渲染 。 注 意 它 仅仅 影响 实例 本 身 以 及 插入 
插 模 内容 的 子 组 件 ， 而 不 是 所 有 子 组 件 。 
我 们 只 需要 执行 实例 watcher 的 update 方法 ， 就 可 以 计 实 例 重新 渲染 。Vue.js 的 每 一 个 实 
例 都 有 一 个 watcher。 第 5 章 介绍 虚拟 DOM 时 提 到 ， 当 状态 发 生变 化 时 ， 会 通知 到 组 件 级 别 ， 
然后 组 件 内 部 使 用 虚拟 DOM 进行 更 详细 的 重新 泻 染 操作 。 事 实 上 ， 组件 就 是 Vue.js 实例 ， 所 以 
组 件 级 别 的 watcher 和 Vue.js 实例 上 的 watcher 说 的 是 同一 个 watcher。 

手动 执行 实例 watcher 的 update 方法 ， 就 可 以 使 Vuejs 实例 重新 泻 染 。vm. $forceUpdate 
的 具体 实现 如 下 : 


ha 
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61 Vue.prototype.$forceUpdate = function () { 


82 const vm = this 

83 if (vm._watcher) { 

84 vm._watcher.update() 
65 } 

06 } 


vm._watcher 就 是 Vue.js 实例 的 watcher， 每 当 组 件 内 依赖 的 数据 发 生变 化 时 ， 都 会 自动 触 
发 Vue.js 实例 中 _watcher 的 update 方法 。 


关于 watcher 的 update 方法 ， 详 见 2.6 节 。 
重新 泻 染 的 实现 原理 并 不 难 ，Vuejjs 的 自动 泻 染 通过 变化 侦 测 来 侦 测 数据 ， 即 当 数据 发 生变 
化 时 ，Vuejs 实例 重新 泻 染 。 而 vm.g$forceUpdate 是 手动 通知 Vue.jjs 实例 重新 泻 染 。 


13.3.2 vm.$destroy 


vm.$destroy 的 作用 是 完全 销毁 一 个 实例 ， 它 会 清理 该 实例 与 其 他 实例 的 连接 ,并 解 绑 其 全 
部 指令 及 监听 器 ， 同 时 会 触发 beforeDestroy 和 destroyed 的 钩子 函数 。 

这 个 方法 并 不 是 很 常用 ， 大 部 分 场景 下 并 不 需要 销毁 组 件 ， 只 需要 使 用 v-if 或 者 v-for 等 
指令 以 数据 驱动 的 方式 控制 子 组 件 的 生命 周期 即 可 。 

下 面 我 们 将 一 步 步 了 解 vm.$destroy 的 实现 原理 。 

首先 ， 我们 需要 在 Vue 的 prototype 属性 上 新 增 一 个 实例 方法 ， 其 代码 如 下 : 


61 Vue.prototype.$destroy = function () { 

62 // 做 些 什么 

63 } 

接 下 来 , 我们 将 开始 实现 销毁 组 件 的 逻辑 。 首 先 ,需要 在 销毁 组 件 之 前 触发 beforeDestroy 
钧 子 函 数 。 其 代码 如 下 : 


61 Vue.prototype.$destroy = function () { 


82 const vm = this 

83 if (vm._isBeingDestroyed) { 
@4 return 

85 

66 callHook(vm, 'beforeDestroy') 
67 vm._isBeingDestroyed = true 
68 } 


为 了 防止 vm.$destroy 被 反复 执行 ， 我们 首先 对 属性 _isBeingDestroyed 进行 判断 ， 如 果 
它 为 true, 说 明 Vue.js 实例 正在 被 销毁 ,直接 使 用 return 语句 退出 函数 执行 轩 辑 。 因 为 销毁 只 
需要 销毁 一 次 即 可 ， 不 需要 反复 销毁 。 
然后 调用 callHook 天 数 触 发 beforeDestroy 的 钧 子 函 数 。 关 于 callHook 的 作用 和 实现 原 
理 , 我 们 会 在 14.2 节 中 单独 介绍 。 这 里 我 们 只 需要 知道 调用 callHook 会 触发 参数 中 提供 的 钧 子 
函数 即 可 。 
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接 下 来 ， 我 们 将 介绍 销毁 实例 的 逻辑 。 


首先 , 需要 清理 当前 组 件 与 父 组 件 之 间 的 连接 。 组件 就 是 Vuejs 的 实例 , 所 以 要 清理 当前 组 
件 与 父 组 件 之 间 的 连接 ， 只 需要 将 当前 组 件 实例 从 父 组 件 实例 的 $children 属性 中 删除 即 可 。 


说 明 ”Vue.js 实例 的 $children 属性 存储 了 所 有 子 组 件 。 


61 // 删除 自己 与 父 级 之 间 的 连接 

862 const parent = vm.$parent 

63 if (parent && !parent._ isBeingDestroyed && !vm.$options.abstract) { 
04 remove(parent.$children, vm) 

e5 } 


上 面 代 码 中 的 判断 条 件 是 : 如 果 当 前 实例 有 父 级 ， 同 时 父 级 没有 被 销毁 且 不 是 抽象 组 件 , 那 
么 将 自己 从 父 级 的 子 级 列表 中 删除 ， 也 就 是 将 自己 的 实例 从 父 级 的 gchildren 属性 中 删除 。 

你 可 能 会 有 疑问 , 一 个 组 件 可 以 同时 被 多 个 组 件 引 入 。 也 就 是 说 ,一 个 子 组 件 可 以 同时 放 在 
很 多 父 组 件 下 面 ， 那 么 为 什么 代码 中 只 从 一 个 父 组 件 的 $children 列表 中 移 除 了 子 组 件 ? 
事实 上 , 子 组 件 在 不 同 父 组 件 中 是 不 同 的 Vue.js 实例 ,所 以 一 个 子 组 件 实例 的 父 级 只 有 一 个 ， 
销毁 操作 也 只 需要 从 父 级 的 子 组 件 列表 中 销毁 当前 这 个 Vuejs 实例 。 

可 以 看 到 ， 代 码 中 使 用 remove 方法 将 vm 从 parent.$children 中 删除 了 。 其 中 remove 方 
法 的 实现 原理 如 下 : 


861 export function remove (arr, item) { 


62 if (arr.length) { 

03 const index = arr.indexof(item) 
84 if (index > -1) { 

65 return arr.splice(index, 1) 
86 } 

67 } 

68 } 


从 上 面 的 代码 可 以 看 到 ，remove 方法 的 实现 原理 非常 优雅 ， 它 不 是 使 用 循环 方法 从 列表 中 
找到 相同 的 元 素 之 后 再 删除 , 而 是 直接 通过 indexof 方法 得 到 元 素 在 数组 中 的 下 标 , 然后 直接 使 
用 这 个 下 标 结合 splice 方法 将 元 素 从 数组 中 删除 。 

父子 组 件 间 的 链接 断 掉 之 后 , 我 们 需要 销毁 实例 上 的 所 有 watcher,， 也 就 是 说 需要 将 实例 上 
所 有 的 依赖 追踪 断 掉 。 

前 面 介绍 过 ,状态 会 收集 一 些 依赖 ， 当 状态 发 生变 化 时 会 向 这 些 依赖 发 送 通知 ,而 被 收集 的 
依赖 就 是 watcher 实例 。 因此， 当 Vue.js 实例 被 销毁 时 ,应 该 将 实例 所 监听 的 状态 都 取消 掉 ， 也 
就 是 从 状态 的 依赖 列表 中 将 watcher 移 除 。 
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在 4.1.2 节 中 ， 我 们 介绍 了 watcher 的 teardown 方法 ， 它 的 作用 是 从 所 有 依赖 项 的 Dep 列 
表 中 将 自己 移 除 。 也 就 是 说 ， 只 要 执行 这 个 方法 ， 就 可 以 断 掉 这 个 watcher 所 监听 的 所 有 状态 。 
因此 ， 我 们 首先 需要 断 掉 Vuejs 实例 自身 的 watcher 实例 监听 的 所 有 状态 ， 代 码 如 下 : 


61 // 从 watcher 监听 的 所 有 状态 的 依赖 列表 中 移 除 watcher 
62 if (vm. watcher) { 

63 vm._watcher.teardown() 

64 } 


这 里 执行 了 组 件 自身 的 watcher 实例 的 teardown 方法 ， 从 所 有 依赖 项 的 订阅 列表 中 删除 
watcher 实例 。 删 除 之 后 ， 当 状态 发 生变 化 时 ，watcher 实例 就 不 会 再 得 到 通知 。 


你 可 能 会 奇怪 vm._watcher 是 从 哪里 来 的 。 当 执行 new Vue() 时 ， 会 执行 一 系列 初始 化 操 
作 并 泻 染 组 件 到 视图 上 ， 其 中 就 包括 vm._watcher 的 处 理 。 从 Vue.js2.0 开始 ， 变 化 侦 测 的 粒度 
调整 为 中 等 粒度 ， 它 只 会 发 送 通知 到 组 件 级 别 ， 然 后 组 件 使 用 虚拟 DOM 进行 重新 泻 染 。 组 件 其 
实 就 是 Vue.js 实例 ， 怎 么 通知 到 组 件 级 别 呢 ? 事实 上 ,在 Vue.js 实例 上 ， 有 一 个 watcher ， 也 就 
是 vm._watcher, 它 会 监听 这 个 组 件 中 用 到 的 所 有 状态 ,， 即 这 个 组 件 内 用 到 的 所 有 状态 的 依赖 列 
表 中 都 会 收集 到 vm._watcher 中 。 当 这 些 状态 发 生变 化 时 ， 也 都 会 通知 vm._watcher ， 然 后 这 
个 watcher 再 调用 虚拟 DOM 进行 重新 泻 染 。 

因此 ， 在 销毁 Vuejs 实例 的 watcher 实例 所 监听 的 所 有 状态 时 ， 只 需要 执行 vm. watcher . 
teardown() 即 可 。 


当然 , 只 从 状态 的 依赖 列表 中 删除 Vuejs 实例 上 的 watcher 实例 是 不 够 的 。 我 们 知道 , Vue.js 
提供 了 vm.$watch 方法 ， 它 允许 用 户 监听 某 个 状态 。 因 此 ， 还 需要 销毁 用 户 使 用 vm.$watch 所 
创建 的 watcher 实例 。 


从 状态 的 依赖 列表 中 销毁 用 户 创 建 的 watcher 实例 和 销毁 Vue 实例 上 的 watcher 实例 相同 ， 
只 需要 执行 watcher 的 teardown 方法 ， 但 问题 是 如 何 知道 用 户 创建 了 多 少 个 watcher? 


Vuejs 的 解决 方案 是 当 执行 new vue() 时 ,在 初始 化 的 流程 中 ,在 this 上 添加 一 个 _watchers 
属性 : 
61 vm. watchers = [] 


然后 每 当 创 建 watcher 实例 时 ， 都 会 将 watcher 实例 添加 到 vm._watchers 中 。 
也 就 是 说 ， 在 Watcher 中 有 这 样 一 行 代码 : 


61 export default class Watcher { 

02 constructor (vm, expOrFn, cb) { 

03 // 每 当 创 建 watcher 实例 时 ， 都 将 watcher 实例 添加 到 vm._watchers 中 
84 vm._watchers.push(this) 
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因此 , 每 当 用 户 使 用 vm.$watch 时 , 都 会 在 vm._watchers 中 添加 一 个 watcher 实例 , 通过 


vm._watchers 就 可 以 得 到 所 有 watcher 实例 。 我 们 只 需要 遍历 vm._watchers 并 依次 执行 每 一 


项 watcher 实例 的 teardown 方法 ,就 可 以 将 watcher 实例 从 它 所 监听 的 状态 的 依赖 列表 中 移 
具体 的 实现 代码 如 下 : 


61 let i = vm. watchers.length 
62 while (i--) { 

63 vm._watchers[i].teardown() 
64 下 


代码 中 的 逻辑 与 前 面 介绍 的 相同 , 循环 vm._watchers, 并 依次 执行 每 个 watcher 的 teard 
方法 。 


从 o 


Own 


接 下 来 ， 向 Vuejjs 实例 添加 _isDestroyed 属性 来 表示 Vue.js 实例 已 经 被 销毁 ， 代 码 如 下 : 


691 vm._isDestroyed = true 

有 趣 的 是 ， 当 vm. $destroy 执行 时 ，Vuejs 不 会 将 已 经 演 染 到 页 面 中 的 DOM 节点 移 除 ， 
会 将 模板 中 的 所 有 指令 解 绑 。 代 码 如 下 : 

61 vm._patch__(vm._vnode, null) 

接 下 来 触发 destroyed 钩子 函数 ， 代 码 如 下 : 


81 // 和 触发 destroyed 钩子 函数 
862 callHook(vm, 'destroyed ' ) 


但 


最 后 移 除 实例 上 的 所 有 事件 监听 器 。 在 13.2.2 节 中 我 们 介绍 vm.$off 时 提 到 , 如 果 该 方法 不 
传递 任何 参数 ， 则 移 除 所 有 的 事件 监听 器 。 因 此 ,这 里 只 需要 执行 vm.goff 方法 , 就 可 以 移 除 所 


有 事件 监听 器 。 其 代码 如 下 : 


61 vm.$off() 


最 后 完整 的 代码 如 下 : 

91 Vue.prototype.$destroy = function () { 

82 const vm = this 

63 if (vm._isBeingDestroyed) { 

64 return 

85 

66 callHook(vm, "beforeDestroy ' ) 

87 vm._isBeingDestroyed = true 

08 

69 // 删除 自己 与 父 级 之 间 的 连接 

16 const parent = vm.$parent 

11 if (parent && !parent. isBeingDestroyed && !vm.$options.abstract) { 
12 remove(parent.$children, vm) 

13 } 

14 // 从 watcher 监听 的 所 有 状态 的 依赖 列表 中 移 除 watcher 
15 if (vm._ watcher) { 

16 vm._watcher.teardown() 

17 } 


18 let i = vm._ watchers.length 
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19 while (i--) { 


26 vm._watchers[i].teardown() 

21 } 

22 vm._isDestroyed = true 

23 // 在 vnode 树 上 触发 destroy 钩子 函数 解 绑 指 令 
24 vm.__patch__(vm._vnode, null) 

25 // 触发 destroyed 钢 子 涵 数 

26 callHook(vm, 'destroyed') 


27 // 移 除 所 有 的 事件 监听 器 
28 vm.$off() 
29 } 


13.3.3 vm.$nextTick 


行 。 


nextTick 接收 一 个 回调 函数 作为 参数 , 它 的 作用 是 将 回调 延迟 到 下 次 DOM 更 新 周期 之 后 执 
它 与 全 局 方法 Vue .nextTick 一 样 ， 不 同 的 是 回调 的 this 自动 绑 定 到 调用 它 的 实例 上 。 如 


果 没 有 提供 回调 且 在 支持 Promise 的 环境 中 ， 则 返回 一 个 Promise。 


我 们 在 开发 项 目 时 会 遇 到 一 种 场景 : 当 更 新 了 状态 (数据 ) 后 , 需要 对 新 DOM 做 一 些 操作 ， 


但 是 这 时 我 们 其 实 获取 不 到 更 新 后 的 DOM， 因 为 还 没有 重新 泻 染 。 这 个 时 候 我 们 需要 使 用 
nextTick 方法 。 


示例 如 下 : 

61 new Vue({ 

62 /1 

03 methods: { 

64 /fe 

685 example: function () { 

686 // 修改 数据 

87 this.message = “changed 
68 // DOM 还 没有 更 新 

89 this.$nextTick(function () { 
16 // DOM 现在 更 新 了 

11 // this 绑 定 到 当前 实例 
12 this.doSsomethingElse() 
13 }) 

14 } 

15 } 

16 })) 


有 一 个 问题 : 下 次 DOM 更 新 周期 之 后 执行 ,具体 是 指 什 么 时 候 呢 ?要 搞 清楚 这 个 问题 , 需 


要 先 弄 明白 什么 是 “下 次 DOM 更 新 周期 ”。 


在 Vue.js 中 ， 当 状态 发 生变 化 时 ，watcher 会 得 到 通知 ， 然 后 触发 虚拟 DOM 的 泻 染 流程 。 


而 watcher 触发 泻 染 这 个 操作 并 不 是 同步 的 ， 而 是 异步 的 。Vuejs 中 有 一 个 队列 ， 每 当 需 要 演 染 


时 ， 


会 将 watcher 推送 到 这 个 队列 中 ,在 下 一 次 事件 循环 中 再 让 watcher 触发 泻 染 的 流程 。 
1. 为 什么 Vue.js 使 用 异步 更 新 队列 
我 们 知道 Vuejs 2.0 开始 使 用 虚拟 DOM 进行 泻 染 ， 变 化 侦 测 的 通知 只 发 送 到 组 件 ， 组 件 内 
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用 到 的 所 有 状态 的 变化 都 会 通知 到 同一 个 watcher， 然 后 虚拟 DOM 会 对 整个 组 件 进行 “ 比 对 
(diff)” 并 更 改 DOM。 也 就 是 说 ， 如 果 在 同一 轮 事件 循环 中 有 两 个 数据 发 生 了 变化 , 那么 组 件 的 
watcher 会 收 到 两 份 通知 ， 从 而 进行 两 次 泻 染 。 事 实 上， 并 不 需要 泻 染 两 次 ， 虚 拟 DOM 会 对 整 
个 组 件 进 行 泻 染 ， 所 以 只 需要 等 所 有 状态 都 修改 完毕 后 ， 一 次 性 将 整个 组 件 的 DOM 演 染 到 最 新 
即 可 。 

要 解决 这 个 问题 ，Vue.js 的 实现 方式 是 将 收 到 通知 的 watcher 实例 添加 到 队列 中 缓存 起 来 ， 
并 且 在 添加 到 队列 之 前 检查 其 中 是 否 已 经 存在 相同 的 watcher， 只 有 不 存在 时 ， 才 将 watcher 
实例 添加 到 队列 中 。 然 后 在 下 一 次 事件 循环 (eventloop ) 中 ，Vuejs 会 让 队列 中 的 watcher 触发 
泻 染 流程 并 清空 队列 。 这 样 就 可 以 保证 即便 在 同一 事件 循环 中 有 两 个 状态 发 生 改变 ,watcher 最 
后 也 只 执行 一 次 泻 染 流程 o 

2. 什么 是 事件 循环 

我 们 都 知道 JavaScript 是 一 门 单线 程 且 非 阻 塞 的 脚本 语言 ， 这 意味 着 JavaScript 代码 在 执行 
的 任何 时 候 都 只 有 一 个 主线 程 来 处 理 所 有 任务 。 而 非 阻 塞 是 指 当 代码 需要 处 理 异 步 任 务 时 ， 主 
线程 会 挂 起 (pending ) 这 个 任务 ， 当 异步 任务 处 理 完毕 后 ， 主 线程 再 根据 一 定 规则 去 执行 相应 
回调 。 
事实 上 ， 当 任务 处 理 完毕 后 ，JavaScript 会 将 这 个 事件 加 入 一 个 队列 中 ， 我 们 称 这 个 队列 为 
事件 队列 。 被 放 入 事件 队列 中 的 事件 不 会 立刻 执行 其 回调 , 而 是 等 待 当 前 执行 栈 中 的 所 有 任务 执 
行 完毕 后 ， 主 线程 会 去 查找 事件 队列 中 是 否 有 任务 。 

异步 任务 有 两 种 类 型 : 微 任务 ( microtask ) 和 安 任 务 (macrotask )。 不 同类 型 的 任务 会 被 分 
配 到 不 同 的 任务 队列 中 。 


当 执行 栈 中 的 所 有 任务 都 执行 完毕 后 ， 会 去 检查 微 任务 队列 中 是 否 有 事件 存在 ， 如 果 存 在 ， 
则 会 依次 执行 微 任务 队列 中 事件 对 应 的 回调 ， 直 到 为 空 。 然 后 去 宏 任务 队列 中 取出 一 个 事件 , 把 
对 应 的 回调 加 入 当前 执行 栈 ， 当 执行 栈 中 的 所 有 任务 都 执行 完毕 后 , 检查 微 任务 队列 中 是 否 有 事 
件 存 在 。 无 限 重 复 此 过 程 ， 就 形成 了 一 个 无 限 循环 ， 这 个 循环 就 叫 作 事件 循环 。 
属于 微 任务 的 事件 包括 但 不 限于 以 下 几 种 : 


口 Promise .then 


口 MutationObserver 
口 Object .observe 


口 process .nextTick 
属于 宏 任务 的 事件 包括 但 不 限于 以 下 几 种 : 
DQ setTimeout 


口 setInterval 
口 setImmediate 
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口 MessageChannel 

口 requestAnimationFrame 
口 IO 

口 UI 交互 事件 

3. 什么 是 执行 栈 

当 我 们 执行 一 个 方法 时 ，JavaScript 会 生成 一 个 与 这 个 方法 对 应 的 执行 环境 ( context )， 又 叫 
执行 上 下 文 。 这 个 执行 环境 中 有 这 个 方法 的 私有 作用 域 、 上 层 作用 域 的 指向 、 方 法 的 参数 、 私 有 
作用 域 中 定义 的 变量 以 及 this 对 象 。 这 个 执行 环境 会 被 添加 到 一 个 栈 中 ， 这 个 栈 就 是 执行 栈 。 

如 果 在 这 个 方法 的 代码 中 执行 到 了 一 行 函数 调用 语句 ， 那 么 JavaScript 会 生成 这 个 函数 的 执 
行 环 境 并 将 其 添加 到 执行 栈 中 , 然后 进入 这 个 执行 环境 继续 执行 其 中 的 代码 。 执 行 完 毕 并 返回 结 
果 后 ，JavaScript 会 退出 执行 环境 并 把 这 个 执行 环境 从 栈 中 销毁 ， 回 到 上 一 个 方法 的 执行 环境 。 
这 个 过 程 反 复 进 行 ， 直 到 执行 栈 中 的 代码 全 部 执行 完毕 。 这 个 执行 环境 的 栈 就 是 执行 栈 。 

回 到 前 面 的 问题 ,“ 下 次 DOM 更 新 周期 ”的 意思 其 实 是 下 次 微 任务 执行 时 更 新 DOM。 而 
vm.$nextTick 其 实 是 将 回调 添加 到 微 任务 中 。 只 有 在 特殊 情况 下 才 会 降级 成 宏 任 务 ， 默 认 会 添 
加 到 微 任务 中 。 

因此 ， 如 果 使 用 vm.$nextTick 来 获取 更 新 后 的 DOM， 则 需要 注意 顺序 的 问题 。 因 为 不 论 
是 更 新 DOM 的 回调 还 是 使 用 vm.$nextTick 注册 的 回调 ， 都 是 向 微 任务 队列 中 添加 任务 ， 所 以 
哪个 任务 先 添加 到 队列 中 ， 就 先 执行 哪个 任务 。 


注意 事实 上 , 更 新 DOM 的 回调 也 是 使 用 vm.$nextTick 来 注册 到 微 任务 中 的 。 


如 果 想 在 vm.$nextTick 中 获取 更 新 后 的 DOM ， 则 一 定 要 在 更 改 数据 的 后 面 使 用 
vm.$nextTick 注册 回调 ， 如 下 所 示 : 


61 new Vue({ 


62 /1 

83 methods: { 

064 /1 

685 example: function () { 

686 // 先 修 改 数据 

87 this.message = “changed 
88 // 然后 使 用 nextTick 注册 回调 
89 this.$nextTick(function () { 
16 // DOM 现在 更 新 了 

11 }) 

12 } 

13 } 

14 })) 


如 果 是 先 使 用 vm.$nextTick 注册 回调 ， 然 后 修改 数据 ， 则 在 微 任务 队列 中 先 执行 使 用 
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vm.$nextTick 注册 的 回调 ,然后 执行 更 新 DOM 的 回调 。 所 以 在 回调 中 得 不 到 最 新 的 DOM ， 


为 此 时 DOM 还 没有 更 新 。 如 下 所 示 : 


01 new Vue({ 


02 /fe 
63 methods: { 

04 /fe 

65 example: function () { 

66 // 先 使 用 nextTick 注册 回调 

67 this.$nextTick(function () { 
68 // DOM 没有 更 新 

69 }) 

16 // 然后 修改 数据 

this.message = “changed ' 

12 } 

13 } 

14 )) 


通过 上 面 的 介绍 我 们 知道 ,在 事件 循环 中 ,必须 当 微 任 务 队列 中 的 事件 都 执行 完 之 后 , 才 会 
从 宏 任 务 队列 中 取出 一 个 事件 执行 下 一 轮 , 所 以 添加 到 微 任务 队列 中 的 任务 的 执行 时 机 优先 于 向 


宏 任 务 队列 中 添加 的 任务 。 
修改 数据 会 默认 将 更 新 DOM 的 回调 添加 到 微 任务 队列 中 ， 代 码 


61 new Vue({ 


02 /fe 
63 methods: { 

04 /1 

65 example: function () { 

66 // 先 使 用 setTimeout 向 宏 任 务 中 注册 回调 
67 setTimeout(_ => { 

08 // DOM 现在 更 新 了 

69 }，9) 

16 // 然后 修改 数据 向 微 任 务 中 注册 回调 

11 this.message = “changed ' 

12 } 

13 } 

14 })) 


如 下 : 


setTimeout 属于 宏 任务 ,使 用 它 注册 的 回调 会 加 入 到 宏 任 务 中 。 宏 任务 的 执行 要 比 微 任务 
晚 ， 所 以 即便 是 先 注册 ， 也 是 先 更 新 DOM 后 执行 setTimeout 中 设置 的 回调 。 


帮助 大 家 彻底 理解 了 vm.$nextTick 的 作用 后 ， 我 们 将 详细 介绍 


其 实现 原理 


Lo 


首先 ， 我 们 知道 vm .$nextTick 和 全 局 方法 Vue .nextTick 是 相同 的 ， 所 以 nextTick 的 具 
体 实现 并 不 是 在 vue 原型 上 的 $nextTick 方法 中 ,而 是 抽象 成 了 nextTick 方法 供 两 个 方法 共用 。 


代码 如 下 : 
61 import { nextTick } from '../util/index' 
62 
63 Vue.prototype.$nextTick = function (fn) { 
@4 return nextTick(fn, this) 


e5 } 
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可 以 看 到 , Vue 原型 上 的 和 extTick 方法 只 是 调用 了 nextTick 方法 , 具体 实现 其 实在 nextTick 中 。 

接 下 来 ， 我 们 将 详细 介绍 nextTick 方法 的 实现 方式 。 

由 于 vm.$nextTick 会 将 回调 添加 到 任务 队列 中 延迟 执行 ， 所 以 在 回调 执行 前 ， 如 果 反 复 调 
用 vm.$nextTick，Vuejs 并 不 会 反复 将 回调 添加 到 任务 队列 中 ， 只 会 向 任务 队列 中 添加 一 个 任 
务 。 此 外 ，Vue.js 内 部 有 一 个 列表 用 来 存储 vm. $nextTick 参数 中 提供 的 回调 。 在 一 轮 事 件 循 环 
中 ，vm.$nextTick 只 会 向 任务 队列 添加 一 个 任务 ， 多 次 使 用 vm.$nextTick 只 会 将 回调 添加 到 
回调 列表 中 缓存 起 来 。 当 任务 触发 时 ， 依 次 执行 列表 中 的 所 有 回调 并 清空 列表 。 其 代码 如 下 : 


61 const callbacks = [] 
692 let pending = false 


03 

64 function flushCallbacks () { 

85 pending = false 

66 const copies = callbacks.slice(6) 

87 callbacks.length = 6 

68 for (let i = 6; i < copies.length; i++) { 
69 copies[i]() 

16 

11 } 

12 


13 let microTimerFunc 

14 const p = Promise.resolve() 
15 microTimerFunc = () => { 

16 p.then(flushCallbacks) 

17 } 


19 export function nextTick (cb, ctx) { 
20 callbacks.push(() => { 


21 if (cb) { 

22 cb.call(ctx) 
23 } 

24 }) 

25 if (!pending) { 

26 pending = true 
27 microTimerFunc() 
28 } 

29 } 

30 


31 // 测试 一 下 

32 nextTick(function () { 

33 console.log(this.name) // Berwin 
34 }, {name: 'Berwin'}) 


在 上 面 代 码 中 ， 我 们 通过 数组 callbacks 来 存储 用 户 注册 的 回调 ， 声 明了 变量 pending 来 
标记 是 否 已 经 向 任务 队列 中 添加 了 一 个 任务 。 每 当 向 任务 队列 中 插入 任务 时 , 将 pending 设置 为 
true， 每 当 任务 被 执行 时 将 pending 设置 为 false， 这 样 就 可 以 通过 pending 的 值 来 判断 是 否 
需要 向 任务 队列 中 添加 任务 。 
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上 面 我 们 还 声明 了 函数 flushcallbacks， 它 就 是 我 们 所 说 的 被 注册 的 那个 任务 。 当 这 个 函 
数 被 触发 时 ， 会 将 callbacks 中 的 所 有 函数 依次 执行 ， 然 后 清空 callbacks， 并 将 pending 设 
置 为 false。 也 就 是 说 ,一 轮 事件 循环 中 flushCallbacks 只 会 执行 一 次 。 

接 下 来 声明 了 microTimerFunc 了 哨 数 ， 它 的 作用 是 使 用 Promise.then 将 flushcallbacks 
添加 到 微 任务 队列 中 。 

上 面 的 准备 工作 完成 后 ， 当 我 们 执行 nextTick 函数 注册 回调 时 ， 首 先 将 回调 函数 添加 到 
callbacks 中 ， 然 后 使 用 pending 判断 是 否 需 要 向 任务 队列 中 新 增 任务 。 

下 面 我 们 从 执行 的 角度 回顾 nextTick 的 流程 。 首 先 ， 当 nextTick 被 调用 时 ， 会 将 回调 函 
数 添 加 到 callbacks 中 。 如 果 此 时 是 本 轮 事 件 循 环 第 一 次 使 用 nextTick， 那 么 需要 向 任务 队列 
中 添加 任务 。 因 此 ， 我 们 使 用 microTimerFunc 函数 封装 Promise.then 的 作用 就 是 将 任务 添加 
到 微 任 务 队列 中 。 如 果 不 是 本 轮 事件 循环 中 第 一 次 调用 nextTick， 也 就 是 说 ， 此 时 任务 队列 中 
已 经 被 添加 了 一 个 执行 回调 列表 的 任务 , 那么 我 们 就 不 需要 执行 microTimerFunc 向 任务 队列 中 
添加 重复 的 任务 , 因为 被 添加 到 任务 队列 中 的 任务 只 需要 执行 一 次 , 就 可 以 将 本 轮 事件 循环 中 使 
用 nextTick 方法 注册 的 回调 都 依次 执行 一 遍 。 图 13-1 给 出 了 nextTick 的 内 部 注册 流程 和 执行 


流程 。 
nextTick | 任务 被 执行 | 


Vv 
将 回调 添加 到 依次 执行 callbacks 中 
callbacks 中 的 所 有 回调 


VY 


| 清空 callbacks | 


任务 队列 中 
添加 任务 


结束 -一 


图 13-1 nextTick 内 部 运行 流程 
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在 Vuejs2.4 版 本 之 前 , nextTick 方法 在 任何 地 方 都 使 用 微 任 务 , 但 是 微 任 务 的 优先 级 太 高 ， 
在 某 些 场景 下 可 能 会 出 现 问题 。 所 以 Vuejs 提供 了 在 特殊 场合 下 可 以 强制 使 用 宏 任务 的 方法 。 具 
体 实现 如 下 : 


61 const callbacks = [] 
62 let pending = false 


03 

64 function flushCallbacks () { 

@5 pending = false 

66 const copies = callbacks.slice(6) 

87 callbacks.length = 6 

88 for (let i = 6; i < copies.length;j i++) { 
69 copies[i]() 

16 

11 } 

12 


13 let microTimerFunc 

14 let macroTimerFunc = function () {...} 
15 

16 // 新 增 代 码 

17 let useMacroTask = false 

18 

19 const p = Promise.resolve() 

20 microTimerFunc = () => { 

21 p.then(flushCallbacks) 

22 } 

23 

24 // 新 增 代 码 

25 export function withMacroTask (fn) { 


26 return fn. withTask || (fn. withTask = function () { 
27 useMacroTask = true 

28 const res = fn.apply(null, arguments) 

29 useMacroTask = false 

36 return res 

31 }) 

32 } 

33 


34 export function nextTick (cb, ctx) { 
35 callbacks.push(() => { 


36 if (cb) { 

37 cb.call(ctx) 

38 } 

39 }) 

46 if (!pending) { 

41 pending = true 

42 // 修改 代码 

43 if (useMacroTask) { 
44 macroTimerFunc() 
45 } else { 

46 microTimerFunc() 
47 } 

48 } 

49 } 


166 第 13 章 ”实例 方法 与 全 局 API 的 实现 原理 


在 上 述 代 码 中 ， 新 增 了 withMacroTask 函数 ， 它 的 作用 是 给 回调 函数 做 一 层 包 装 ， 保 证 在 
整个 回调 函数 执行 过 程 中 ， 如 果 修 改 了 状态 (数据 )， 那么 更 新 DOM 的 操作 会 被 推 到 宏 任 务 队 
列 中 。 也 就 是 说 ， 更 新 DOM 的 执行 时 间 会 晚 于 回调 函数 的 执行 时 间 。 

下 面 用 点 击 事件 举例 。 假 设 点 击 事件 的 回调 使 用 了 withMacroTask 进行 包装 ， 那 么 在 点 击 
事件 被 触发 时 ， 如 果 回 调 中 修改 了 数据 ， 那 么 这 个 修改 数据 的 操作 所 触发 的 更 新 DOM 的 操作 会 
被 添加 到 宏 任务 队列 中 。 因 为 我 们 在 nextTick 中 新 增 了 判断 语句 ， 当 useMacroTask 为 true 
时 ， 则 使 用 macroTimerFunc 注册 事件 。 

因此 , withMacroTask 的 实现 逻辑 很 简单 ， 先 将 变量 useMacroTask 设置 为 true, 然后 执行 回 
调 ， 如 果 这 时 候 回 调 中 修改 了 数据 ( 触发 了 更 新 DOM 的 操作 )， 而 useMacroTask 是 true， 那 么 
更 新 DOM 的 操作 会 被 推送 到 宏 任 务 队列 中 。 当 回调 执行 完毕 后 , 将 useMacroTask 恢复 为 false。 


说 明 更 新 DOM 的 回调 也 是 使 用 nextTick 将 任务 添加 到 任务 队列 中 。 


简单 来 说 就 是 , 被 withMacroTask 包 庄 的 函数 所 使 用 的 所 有 vm.$nextTick 方法 都 会 将 回调 
添加 到 宏 任务 队列 中 ， 其 中 包括 状态 被 修改 后 触发 的 更 新 DOM 的 回调 和 用 户 自己 使 用 
vm.$nextTick 注册 的 回调 等 。 

接 下 来 ,我们 将 介绍 macroTimerFunc 是 如 何 将 回调 添加 到 宏 任务 队列 中 的 。 


前 面 我 们 介绍 过 几 种 属于 宏 任 务 的 事件 ，Vuejs 优先 使 用 setImmediate， 但 是 它 存在 兼容 
性 问题 ， 只 能 在 下 中 使 用 ， 所 以 使 用 MessageChannel 作为 备 选 方案 。 如 果 浏 览 器 也 不 支持 
MessageChanne1， 那 么 最 后 会 使 用 setTimeout 来 将 回调 添加 到 安 任务 队列 中 。 


实现 方式 如 下 : 

61 if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { 
62 macroTimerFunc = () => { 

03 setImmediate(flushCallbacks) 

64 } 

65 } else if (typeof MessageChannel !== 'undefined' && ( 

66 isNative(MessageChannel) || 

67 MessageChannel.tostring() === '[object MessageChannelConstructor]' 
e8  )){ 

69 const channel = new MessageChannel() 

16 const port = channel.port2 

11 channel.port1.onmessage = flushCallbacks 

12 macroTimerFunc = () => { 

13 port.postMessage(1) 

14 } 

15 } else{ 

16 macroTimerFunc = () => { 

17 setTimeout(flushCallbacks，6) 

18 } 


19 } 
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可 以 看 到 ，macroTimerFunc 被 执行 时 ， 会 将 flushcallbacks 添加 到 宏 任 务 队列 中 。 


前 面 提 到 microTimerFunc 的 实现 原理 是 使 用 Promise.then, 但 并 不 是 所 有 浏览 器 都 支持 
Promise， 当 不 支持 时 ， 会 降级 成 macroTimerFunc。 其 实现 方式 如 下 : 


61 if (typeof Promise !== "undefined' && isNative(Promise)) { 
62 const p = Promise.resolve() 

83 microTimerFunc = () => { 

84 p.then(flushCallbacks) 

65 } 

66 } elsef{ 

67 microTimerFunc = macroTimerFunc 

68 } 


首先 判断 浏览 器 是 否 支 持 Promise， 然 后 进行 相应 的 处 理 即 可 。 


官方 文档 中 有 这 样 一 句 话 : 如 果 没 有 提供 回调 且 在 支持 Promise 的 环境 中 ， 则 返回 一 个 
Promise。 也 就 是 说 ， 可 以 这 样 使 用 vm.$nextTick : 


61 this.$nextTick() 


62 .then(function () { 
63 // DOM 更 新 了 
84 }) 


要 实现 这 个 功能 ， 我 们 只 需要 在 nextTick 中 进行 判断 ， 如 果 没 有 提供 回调 且 当 前 环境 支持 
Promise， 和 那么 返回 Promise， 并 且 在 callbacks 中 添加 一 个 函数 ， 当 这 个 函数 执行 时 ， 执 行 
Promise 的 resolve 即 可 ， 代 码 如 下 : 


61 export function nextTick (cb, ctx) { 
82 // 新 增 代码 


83 let _resolve 

84 callbacks.push(() => { 

85 if (cb) { 

66 cb.call(ctx) 

87 } else if (_resolve) { // 新 增 代码 
88 _resolve(ctx) 

69 } 

10 }) 

11 if (!pending) { 

12 pending = true 

13 if (useMacroTask) { 

14 macroTimerFunc() 

15 } else { 

16 microTimerFunc() 

17 } 

18 } 

19 // 新 增 代码 

26 if (!cb && typeof Promise !== “undefined') { 
21 return new Promise(resolve => { 
22 _resolve = resolve 

23 }) 

24 } 
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在 上 面 的 代码 中 ， 先 在 函数 作用 域 中 声明 了 变量 _resolve， 然 后 进行 相应 的 处 理 。 
最 终 完整 的 代码 如 下 : 


@1 const callbacks = [] 
62 let pending = false 


63 

64 function flushCallbacks () { 

65 pending = false 

66 const copies = callbacks.slice(6) 

67 callbacks.length = 6 

08 for (let i = 6; i «< copies.length; i++) { 
69 copies[i]() 

16 } 

11 } 

12 


13 let microTimerFunc 
14 let macroTimerFunc 
15 let useMacroTask = false 


16 

17 if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { 
18 macroTimerFunc = () => { 

19 setImmediate(flushCallbacks) 

26 } 

21 } else if (typeof MessageChannel !== 'undefined' && ( 
22 isNative(MessageChannel) || 

23 MessageChannel.toSstring() === '[object MessageChannelConstructor]' 
24、 站 省 

25 const channel = new MessageChannel() 

26 const port = channel.port2 

27 channel.port1.onmessage = flushCallbacks 

28 macroTimerFunc = () => { 

29 port.postMessage(1) 

36 } 

31 } else { 

32 macroTimerFunc = () => { 

33 setTimeout(flushCallbacks, 8) 

34 } 

35 } 

36 

37 if (typeof Promise !== "undefined' && isNative(Promise)) { 
38 const p = Promise.resolve() 

39 microTimerFunc = () => { 

46 p.then(flushCallbacks) 

41 } 

42 } else { 

43 microTimerFunc = macroTimerFunc 

44 } 

45 

46 export function withMacroTask (fn) { 

47 return fn. withTask || (fn. withTask = function () { 
48 useMacroTask = true 

49 const res = fn.apply(null, arguments) 


56 useMacroTask = false 
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51 return res 

52 }) 

53 } 

54 

55 export function nextTick (cb, ctx) { 
56 let _resolve 

57 callbacks.push(() => { 

58 if (cb) { 

59 cb.call(ctx) 

66 } else if (_resolve) { 

61 _resolve(ctx) 

62 } 

63 }) 

64 if (!pending) { 

65 pending = true 

66 if (useMacroTask) { 

67 macroTimerFunc() 

68 } else { 

69 microTimerFunc() 

76 } 

71 

72 if (!cb && typeof Promise !== 'undefined') { 
73 return new Promise(resolve => { 
74 _resolve = resolve 

75 }) 

76 } 

77 } 


13.3.4 vm.$mount 
我 们 并 不 常用 这 个 方法 ， 其 原因 是 如 果 在 实例 化 Vuejs 时 设置 了 


el 选项 ， 会 自动 把 Vue.js 


实例 挂 载 到 DOM 元 素 上 。 但 理解 这 个 方法 却 非常 重要 ， 因 为 无 论 我 们 在 实例 化 Vue.js 时 是 否 设 
置 了 el 选项 ， 想 让 Vue.js 实例 具有 关联 的 DOM 元 素 ， 只 有 使 用 vm. $mount 方法 这 一 种 途径 。 


在 详细 介绍 vm.$mount 的 内 部 原理 之 前 ， 我 们 先 来 回顾 下 它 的 使 用 方式 : 


61 vm.$mount( [elementOrSelector] ) 

下 面 简要 介绍 一 下 这 个 方法 。 

口 参数 : {Element | string} [elementOrSelector]。 
口 返回 值 : vm， 即 实例 自身 。 


联 的 DOM 元 素 。 我 们 可 以 使 用 vm.$mount 手动 挂 载 一 个 未 提 

elementOrSelector 参数 ,模板 将 被 泻 染 为 文档 之 外 的 元 素 ， 

的 API 把 它 插 入 文档 中 。 这 个 方法 返回 实例 自身 ， 因 而 可 以 链 
口 示例 : 


61 var MyComponent = Vue.extend({ 
62 template: '<div>Hello!l</div>" 


口 用 法 : 如 果 Vuejs 实 例 在 实例 化 时 没有 收 到 el 选项 ， 则 它 处 于 “未 挂 载 ”状态 ， 没 有关 


载 的 实例 。 如 果 没 有 提供 
并 且 必 须 使 用 原生 DOM 
式 调用 其 他 实例 方法 。 
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e3 }) 


85 ”// 创建 并 挂 载 到 #app (会 蔡 换 #app) 
06 new MyComponent().$mount('#app') 


88 ”// 创建 并 挂 载 到 #app (会 蔡 换 #app) 
69 new MyComponent({ el: '#app' }) 


11  // 或 者 ， 在 文档 之 外 演 染 并 且 随 后 挂 载 
12 var component = new MyComponent().$mount() 
13 document.getElementById('app').appendChild(component.$el) 


在 第 12 章 中 ， 我 们 介绍 了 Vue.js 有 很 多 不 同 的 构建 版 本 。 事 实 上 ， 在 不 同 的 构建 版 本 中 ， 
vm. $mount 的 表现 都 不 一 样 。 其 差异 主要 体现 在 完整 版 (vuejs ) 和 只 包含 运行 时 版 本 ( vueruntimejs ) 
之 间 。 

完整 版 和 只 包含 运行 时 版 本 之 间 的 差异 在 于 是 否 有 编译 器 , 而 是 否 有 编译 器 的 差异 主要 在 于 
vm.$mount 方法 的 表现 形式 。 在 只 包含 运行 时 的 构建 版 本 中 ，vm.$mount 的 作用 如 前 面 介绍 的 那 
样 。 而 在 完整 的 构建 版 本 中 ，vm.$mount 的 作用 会 稍 有 不 同 ， 它 首先 会 检查 template 或 el 选 
项 所 提供 的 模板 是 否 已 经 转换 成 演 染 函数 ( render 函数 )。 如 果 没 有 ， 则 立即 进入 编译 过 程 ， 将 
模板 编译 成 泻 染 函 数 ， 完 成 之 后 再 进入 挂 载 与 泻 染 的 流程 中 。 

只 包含 运行 时 版 本 的 vm.$mount 没有 编译 步 又， 它 会 默认 实例 上 已 经 存在 泻 染 函 数 ， 如 果 
不 存在 ， 则 会 设置 一 个 。 并 且 ， 这 个 泻 染 函 数 在 执行 时 会 返回 一 个 空 节 点 的 VNode， 以 保证 执行 
时 不 会 因为 函数 不 存在 而 报错 。 同 时 ， 如 果 是 在 开发 环境 下 运行 ，Vue.js 会 触发 警告 ， 提 示 我 们 
当前 使 用 的 是 只 包含 运行 时 版 本 ,会 让 我 们 提供 泻 染 函数 ,或 者 去 使 用 完整 的 构建 版 本 。 

所 以 从 原理 的 角度 来 讲 , 完整 版 和 只 包含 运行 时 版 本 之 间 是 包含 关系 , 完整 版 包含 只 包含 运 
行 时 版 本 ， 如 图 13-2 所 示 。 


mount 


We 


图 13-2 完整 版 与 只 包含 运行 时 版 本 之 间 的 差异 


1. 完整 版 vm. $mount 的 实现 原理 

由 于 完整 版 的 vm.$mount 方法 包含 只 包含 运行 时 版 本 的 vm.$mount 方法 ， 所 以 本 节 中 只 介 
绍 它们 之 间 存 在 差异 的 这 部 分 内 容 。 

首先 ， 来 看 完整 版 vm.$mount 的 实现 代码 : 
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61 const mount = Vue.prototype.$mount 

92 Vue.prototype.$mount = function (el) { 
63 // 做 些 什么 

84 return mount.call(this, el) 

65 } 


在 上 面 的 代码 中 , 我 们 将 vue 原型 上 的 $mount 方法 保存 在 mount 中 ， 以 便 后 续 使 用 。 然 后 
Vue 原型 上 的 $mount 方法 被 一 个 新 的 方法 覆盖 了 。 新 方法 中 会 调用 原始 的 方法 ， 这 种 做 法 通常 


通过 函数 动 持 ,可 以 在 原始 功能 之 上 新 增 一 些 其 他 功能 。 在 上 面 的 代码 中 ，vm.$mount 的 原 
始 方 法 就 是 mount 的 核心 功能 ， 而 在 完整 版 中 需要 将 编译 功能 新 增 到 核心 功能 上 去 。 


由 于 el 参数 支持 元 素 类 型 或 者 字符 串 类 型 的 选择 器 ,所 以 第 一 步 是 通过 el 获取 DOM 元 素 。 
代码 如 下 : 


61 const mount = Vue.prototype.$mount 

92 Vue.prototype.$mount = function (el) { 
@3 el = el && query(el) 

84 return mount.call(this, el) 

e5 } 


这 里 我 们 使 用 query 获取 DOM 元 素 ， 其 实现 方式 如 下 : 


61 function query (el) { 


02 if (typeof el === 'string') { 

83 const selected = document.querySelector(el) 
84 if (!selected) { 

85 return document.createElement('div') 

06 } 

87 return selected 

88 } else { 

69 return el 

16 } 

11 } 


上 面 的 代码 对 el 进行 类 型 判断 ,如 果 是 字符 串 , 则 使 用 document.querySelector 获取 DOM 
元 素 ， 如 果 获 取 不 到 ， 则 创建 一 个 空 的 div 元 素 。 如 果 el 的 类 型 不 是 字符 串 ， 那 么 认为 它 是 元 
素 类 型 ， 直 接 返 回 el ( 如 果 执 行 vm.$mount 方法 时 没有 传递 el 参数 ， 则 返回 undefined )。 

接 下 来 ， 将 实现 完整 版 vm.$mount 中 最 主要 的 功能 : 编译 器 。 

首先 判断 Vue.js 实例 中 是 否 存 在 泻 染 函 数 ， 只 有 不 存在 时 , 才 会 将 模板 编译 成 演 染 函数 。 其 

代码 如 下 : 


61 const mount = Vue.prototype.$mount 
92 Vue.prototype.$mount = function (el) { 
83 el = el && query(el) 


04 
85 const options = this.$options 
66 if (!options.render) { 


67 // 将 模板 编译 成 澄 染 函数 并 赋值 给 options .render 
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68 } 

89 

16 return mount.call(this, el) 
11 } 


在 上 面 的 代码 中 ， 你 一 定 会 对 this .$options 感到 陌生 。 这 是 因为 我 们 还 没有 介绍 初始 化 
相关 的 流程 ， 这 些 内 容 将 在 第 14 章 中 介绍 。 

在 实例 化 Vue.js 时 ， 会 有 一 个 初始 化 流程 ， 其 中 会 向 Vue.js 实例 上 新 增 一 些 方法 ， 这 里 的 
this.$options 就 是 其 中 之 一 ， 它 可 以 访问 到 实例 化 Vuejs 时 用 户 设置 的 一 些 参数 ， 例 如 
template 和 render。 


通过 这 个 条 件 会 发 现 ， 如 果 在 实例 化 Vuejs 时 给 出 了 render 选项 ,那么 template 其 实 是 无 

效 的 ， 因 为 不 会 进入 模板 编译 的 流程 ， 而 是 直接 使 用 render 选项 中 提供 的 演 染 函数 。 
关于 这 一 点 ，Vue.js 在 官方 文档 的 template 选项 中 也 给 出 了 相应 的 提示 。 如 果 没 有 render 

选项 ， 那 么 需要 获取 模板 并 将 模板 编译 成 泻 染 郴 数 ( render 函数 ) 赋值 给 render 选项 。 
我 们 先 介绍 获取 模板 相关 的 逻辑 ， 代 码 如 下 : 


61 const mount = Vue.prototype.$mount 
92 Vue.prototype.$mount = function (el) { 
03 el = el && query(el) 


94 

65 const options = this.$options 
66 if (!options.render) { 

87 // 新 增 获 取 模 板 相 关 逻 辑 

08 let template = options.template 
69 if (template) { 

16 // 做 些 什 么 

11 } else if (el) { 

12 template = getOuterHTML(el) 
13 } 

14 } 

15 

16 return mount.call(this, el) 

17 } 


上 面 代码 中 新 增 了 获取 模板 相关 的 逻辑 。 从 选项 中 取出 template 选项 ， 也 就 是 取出 用 户 实 
例 化 Vuejs 时 设置 的 模板 。 如 果 没 取 到 ,说 明 用 户 没 有 设置 template 选项 ， 那 么 使 用 
getOuterHTML 方法 从 用 户 提供 的 el 选项 中 获取 模板 。getouterHTML 方法 的 实现 如 下 : 


61 function getOuterHTML (el) { 


62 if (el.outerHTML) { 

@3 return el.outerHTML 

@4 } else { 

65 const container = document.createElement('div') 
66 container.appendChild(el.cloneNode(true)) 

67 return container.innerHTML 

68 } 
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可 以 看 出 ，getouterHTML 方法 会 返回 参数 中 提供 的 DOM 元 素 的 HTML 字符 串 。 

结合 前 面 的 代码 ， 整 体 逻 辑 是 ， 如 果 用 户 没有 通过 template 选项 设置 模板 ， 那 么 会 从 el 
选项 中 获取 HTML 字符 串 当 作 模 板 。 如果 用 户 提供 了 template 选项 ,那么 需要 对 它 进一步 解析 ， 
因为 这 个 选项 支持 很 多 种 使 用 方式 。template 选项 可 以 直接 设置 成 字符 串 模板 ， 也 可 以 设置 为 
以 # 开 头 的 选择 符 ， 还 可 以 设置 成 DOM 元 素 。 

为 了 从 不 同 的 格式 中 将 模板 解析 出 来 ， 需 新 增 如 下 代码 : 


61 const mount = Vue.prototype.$mount 
92 Vue.prototype.$mount = function (el) { 
@3 el = el && query(el) 


64 

85 const options = this.$options 

66 if (!options.render) { 

87 let template = options.template 

88 if (template) { 

69 // 新 增 解析 模板 逻辑 

16 if (typeof template === 'string') { 
11 if (template.charAt(6) === '#') { 
12 template = idToTemplate(template) 
13 } 

14 } else if (template.nodeType) { 

15 template = template.innerHTML 

16 } else { 

17 if (process.env.NODE_ENV !== "production') { 
18 warn('invalid template option:' + template, this) 
19 

26 return this 

21 } 

22 } else if (el) { 

23 template = getOuterHTML(el) 

24 } 

25 } 

26 

27 return mount.call(this, el) 

28 } 


如 果 template 是 字符 串 并 且 以 # 开 头 , 则 它 将 被 用 作 选 择 符 。 通 过 选择 符 获 取 DOM 元 素 后 ， 
会 使 用 innerHTML 作为 模板 。 


在 上 述 代 码 中 ,我 们 使 用 idToTemplate 方法 从 选择 符 中 获取 模板 ， 它 的 实现 方式 如 下 : 


61 function idToTemplate (id) { 


082 const el = query(id) 
03 return el && el.innerHTML 
64 } 


可 以 看 到 ,idToTemplate 方法 使 用 选择 符 获 取 DOM 元 素 之 后 , 将 它 的 innerHTML 作为 模板 。 


如 果 template 是 字符 串 ， 但 不 是 以 # 开 头 ， 就 说 明 template 是 用 户 设 置 的 模板 ， 不 需要 进 
行 任 何 处 理 ， 直 接 使 用 即 可 。 
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如 果 template 选项 的 类 型 不 是 字符 串 ， 则 判断 它 是 否 是 一 个 DOM 元 素 : 如 果 是 ， 则 使 用 
DOM 元 素 的 innerHTML 作为 模板 ; 如 果 不 是 ， 只 需要 判断 它 是 否 具备 nodeType 属性 即 可 。 


如 果 template 选项 既 不 是 字符 串 ， 也 不 是 DOM 元 素 ， 那 么 Vuejjs 会 触发 警告 ,提示 用 户 


template 选项 是 无 效 的 。 


当 获 取 模 板 之 后 ， 下 一 步 要 做 的 事情 是 将 模板 编译 成 泻 染 函数 ， 新 增 如 下 代码 : 


const mount = Vue.prototype.$mount 
Vue.prototype.$mount = function (el) { 
el = el && query(el) 


const options = this.$options 
if (!options.render) { 
let template = options.template 
if (template) { 
if (typeof template === 'string') { 
if (template.charAt(8) === '#') { 
template = idToTemplate(template) 


} else if (template.nodeType) { 
template = template.innerHTML 
} else { 
if (process.env.NODE_ENV !== 'production') { 
warn('invalid template option:' + template, this) 


return this 


} 
} else if (el) { 
template = getOuterHTML(el) 


} 


// 新 增 编译 相关 逻辑 
if (template) { 
const { render } = compileToFunctions( 
template, 
{ehs 
this 
) 
options.render = render 
} 
} 


return mount.call(this, el) 


} 


代码 中 新 增 了 编译 相关 的 逻辑 , 通过 执行 compileToFunctions 函数 可 以 将 模板 编译 成 泻 染 
函数 并 设置 到 this.$options 上 。 


关于 模板 编译 的 内 容 , 我 们 在 第 三 篇 中 详细 介绍 过 , 但 当时 并 没有 过 多 介绍 代码 字符 串 如 何 


转换 成 泻 


染 函 数 ( render 函数 )， 现 在 我 们 详细 说 明 一 下 。 
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将 模板 编译 成 代码 字符 串 并 将 代码 字符 串 转 换 成 泻 染 函数 的 过 程 是 在 comp 
函数 中 完成 的 ， 该 函数 的 内 部 实现 如 下 : 


61 function compileToFunctions (template, options, vm) { 


02 options = extend({}, options) 

03 

684 // 检查 缓存 

85 const key = options.delimiters 

66 ? String(options.delimiters) + template 
67 : template 

88 if (cache[key]) { 

69 return cache[key] 

16 } 

11 

12 // 编译 

13 const compiled = compile(template, options) 
14 

15 // 将 代码 字符 事 转换 为 函数 

16 const res = {} 

17 res.render = createFunction(compiled.render) 
18 

19 return (cache[key] = res) 

20 } 

21 

22 function createFunction (code) { 

23 return new Function(code) 

24 } 


ileToFunctions 


首先 ， 将 options 属性 混合 到 空 对 象 中 ， 其 目的 是 让 options 成 为 可 选 参数 。 


接 下 来 ,检查 缓存 中 是 否 已 经 存在 编译 后 的 模板 。 如 果 模 板 已 经 被 编译 ， 就 会 直接 返回 缓存 


中 的 结果 ， 不 会 重复 编译 ， 保 证 不 做 无 用 功 来 提升 性 能 。 


然后 调用 compile 函数 来 编译 模板 。 这 部 分 内 容 就 是 第 三 篇 中 介绍 的 , 将 模板 编译 成 代码 字 


加 


符 串 并 存储 在 compiled 中 的 render 属性 中 ， 此 时 该 属性 中 保存 的 内 容 类 似 下 


面 这 样 : 


61 "with(this){return _c("div",{attrs:{"id":"el"}},[_v("Hello "+_s(name))])}' 


接 下 来 , 调用 createFunction 函数 将 代码 字符 串 转换 为 函数 。 其 实现 原理 


相当 简单 ,使 用 


new Function(code) 就 可 以 完成 。 


在 代码 字符 串 被 new Function(code) 转 换 成 函数 之 后 ， 当 调用 函数 时 ， 代 码 字 符 串 会 被 执 


行 。 例 如 : 


861 const code = 'console.log("Hello Berwin") 
82 const render = new Function(code) 
063 render() // Hello Berwin 


最 后 ， 将 演 染 函数 返回 给 调用 方 。 


回 到 前 面 ， 当 通过 compileToFunctions 限 数 得 到 演 染 水 数 之 后 ,将 演 染 函数 设置 到 this . 


$options 上 。 
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2. 只 包含 运行 时 版 本 的 vm.$mount 的 实现 原理 
只 包含 运行 时 版 本 的 vm.$mount 方法 包含 了 vm.g$mount 方法 的 核心 功能 ， 实 现 如 下 : 


@1 Vue.prototype.$mount = function (el) { 


62 el = el && inBrowser ? query(el) : undefined 
03 return mountComponent(this, el) 
64 } 


可 以 看 到 ，$mount 方法 将 ID 转换 为 DOM 元 素 后 ， 使 用 mountComponent 子 数 将 Vue.js 实 
例 挂 载 到 DOM 元 素 上 。 事 实 上 ， 将 实例 挂 载 到 DOM 元 素 上 指 的 是 将 模板 演 染 到 指定 的 DOM 
元 素 中 ， 而 且 是 持续 性 的 ， 以 后 当 数 据 〈 状态 ) 发 生变 化 时 ,依然 可 以 泻 染 到 指定 的 DOM 元 
素 中 。 


实现 这 个 功能 需要 开启 watcher。watcher 将 持续 观察 模板 中 用 到 的 所 有 数据 ( 状态 )， 当 
这 些 数据 ( 状态 ) 被 修改 时 它 将 得 到 通知 ， 从 而 进行 演 染 操作 。 这 个 过 程 会 持续 到 实例 被 销毁 。 
接 下 来 ， 我 们 来 看 一 下 mountComponent 函数 的 具体 实现 : 


861 export function mountComponent (vm, el) { 


62 if (!vm.$options.render) { 

93 vm.$options.render = createEmptyVNode 

@4 if (process.env.NODE_ENV !== 'production') { 
65 // 在 开发 环境 发 出 警告 

66 } 

67 } 

68 } 


首先 ，mountComponent 方法 会 判断 实例 上 是 否 存在 泻 染 函 数 。 如 果 不 存在 ， 则 设置 一 个 默 
认 的 泻 染 函数 createEmptyVNode， 该 泻 染 函 数 执行 后 ， 会 返回 一 个 注释 类 型 的 VNode 节点 。 在 
6.3.1 节 中 介绍 VNode 时 ， 我 们 见 过 这 个 泻 染 函 数 ， 当 时 说 它 可 以 创建 注释 节点 。 事 实 上 ， 如 果 
在 mountComponent 方法 中 发 现实 例 上 没有 演 染 函数 ， 则 会 将 el 参数 指定 页 面 中 的 元 素 节点 替 
换 成 一 个 注释 节点 ， 并 且 在 开发 环境 下 在 浏览 器 的 控制 台中 给 出 警告 。 

Vuejs 实例 在 不 同 的 阶段 会 触发 不 同 的 生命 周期 钩子 ， 在 挂 载 实例 之 前 会 触发 beforeMount 
钩子 函数 。 代 码 如 下 : 


861 export function mountComponent (vm, el) { 


62 if (!vm.$options.render) { 

93 vm.$options.render = createEmptyVNode 

064 if (process.env.NODE_ENV !== "production ' ) { 
65 // 在 开发 环境 下 发 出 警告 

66 } 

67 } 

68 // 触发 生命 周期 钩子 

69 callHook(vm, "beforeMount ' ) 

10 } 


关于 callHook 的 实现 原理 , 我 们 将 在 第 14 章 中 单独 介绍 , 这 里 只 需要 知道 调用 它 并 设置 一 
个 名 字 ， 就 可 以 触发 对 应 的 生命 周期 钩子 。 
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钩子 函数 触发 后 ,将 执行 真正 的 挂 载 操 作 。 挂 载 操 作 与 泻 染 类 似 , 不 同 的 是 泻 染 指 的 是 泻 染 
一 次 ， 而 挂 载 指 的 是 持续 性 泻 染 。 挂 载 之 后 ,每 当 状态 发 生变 化 时 ， 都 会 进行 泻 染 操 作 。 具 体 实 
现 如 下 : 


61 export function mountComponent (vm, el) { 
62 if (!vm.$options.render) { 


83 vm.$options.render = createEmptyVNode 
84 if (process.env.NODE_ENV !== "production ' ) { 
65 // 在 开发 环境 下 发 出 警告 

06 } 

67 } 

68 // 触发 生命 周期 钩子 

89 callHook(vm, "beforeMount ' ) 

106 

11 // 挂 载 

12 vm._watcher = new Watcher(vm，() => { 
13 vm._update(vm._render()) 

14 },， noop) 

15 

16 // 触发 生命 周期 钩子 

17 callHook(vm, "mounted ' ) 

18 return vm 

19 } 


代码 中 的 watcher 在 第 一 篇 中 详细 介绍 过 ， 这 里 主要 有 两 个 方法 是 我 们 不 熟悉 的 ， 分 别 是 
_update 和 _render: 前 者 的 作用 是 调用 虚拟 DOM 中 的 patch 方法 来 执行 节点 的 比 对 与 泻 染 操 
作 ， 而 后 者 的 作用 是 执行 泻 染 函数 ， 得 到 一 份 最 新 的 VNode 节点 树 。 

所 以 在 这 段 代 码 中 ，vm._update(vm._render()) 的 作用 是 先 调用 泻 染 函数 得 到 一 份 最 新 的 
VNode 节点 树 ， 然 后 通过 _update 方法 对 最 新 的 VNode 和 上 一 次 演 染 用 到 的 旧 VNode 进行 对 比 并 
更 新 DOM 节点 。 简 单 来 说 ， 就 是 执行 了 演 染 操作 。 

挂 载 是 持续 性 的 ， 而 持续 性 的 关键 就 在 于 new Watcher 这 行 代 码 。 我 们 在 第 4 章 中 介绍 过 ， 
Watcher 的 第 二 个 参数 支持 函数 , 并 且 当 它 是 函数 时 ,会 发 生 很 神奇 的 事情 ,会 同时 观察 函数 中 
所 读 取 的 所 有 Vue.js 实例 上 的 响应 式 数据 。 

下 面 我 们 来 回顾 一 下 watcher 观察 数据 的 过 程 。 


状态 通过 observer 转换 成 响应 式 之 后 ， 每 当 触发 getter 时 ， 会 从 全 局 的 某 个 属性 中 获取 
watcher 实例 并 将 它 添 加 到 数据 的 依赖 列表 中 。watcher 在 读 取 数据 之 前 , 会 先 将 自己 设置 到 全 
局 的 某 个 属性 中 。 而 数据 被 读 取 会 触发 getter， 所 以 会 将 watcher 收集 到 依赖 列表 中 。 收 集 好 依 
赖 后 ， 当 数据 发 生变 化 时 ， 会 向 依赖 列表 中 的 watcher 发 送 通知 。 

由 于 Watcher 的 第 二 个 参数 支持 函数 ， 所 以 当 watcher 执行 函数 时 ， 函 数 中 所 读 取 的 数 
据 都 将 会 触发 getter 去 全 局 找到 watcher 并 将 其 收集 到 函数 的 依赖 列表 中 。 也 就 是 说 ,函数 中 
读 取 的 所 有 数据 都 将 被 watcher 观察 。 这 些 数 据 中 的 任何 一 个 发 生变 化 时 , watcher 都 将 得 到 
通知 。 
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得 出 了 这 个 结论 后 ， 有 什么 用 呢 ? 当 数 据 发 生变 化 时 ，watcher 会 一 次 又 一 次 地 执行 函数 进 


入 泻 染 流程 ， 人 这 个 过 程 会 持续 到 实例 被 销毁 。 
挂 载 完毕 后 ， 会 触发 mounted 钩子 困 数 。 


13.4 全 局 API 的 实现 原理 


现在 我 们 已 经 了 解 了 Vuejs 实例 方法 的 内 部 原理 ， 接 下 来 将 介绍 全 局 API 的 内 部 原理 。 


13.4.1 Vue.extend 
其 用 法 如 下 : 


61 Vue.extend( options ) 


口 参数 : {0bject} options 
口 用 法 : 使 用 基础 vue 构造 器 创建 一 个 “ 子 类 ”， 其 参数 是 


data 选项 是 特例 ， 在 Vue .extend() 中 ， 它 必须 是 函数 : 


81 <div id="mount-point"></div> 
82  // 创建 构造 器 
63 var Profile = Vue.extend({ 


一 个 包含 “组 件 选项 ”的 对 象 。 


84 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', 
85 data: function () { 

66 return { 

87 firstName: "Walter '， 

08 lastName: “White '， 

69 alias: 'Heisenberg'" 

16 } 

11 } 

12 )) 


13  // 创建 Profile 实例 ， 并 挂 载 到 一 个 元 素 上 
14 new Profile().$mount('#mount-point') 


结果 如 下 : 
61 <p>wWalter White aka Heisenberg</p> 


挂 载 方法 ， 而 前 者 是 直接 在 vue 上 挂 载 方法 。 代 码 如 下 所 示 : 


91 Vue.extend = function (extendOptions) { 
62 // 做 点 什么 
63 } 


在 上 面 的 代码 中 ， 我 们 直接 在 Vue.js 上 添加 了 extend 方法 。 


全 局 API 和 实例 方法 不 同 ， 后 者 是 在 Vue 的 原型 上 挂 载 方法 ， 也 就 是 在 Vvue.prototype 上 


Vue.extend 的 作用 是 创建 一 个 子 类 ， 所 以 可 以 创建 一 个 子 类 ， 然 后 让 它 继承 Vue 身上 的 一 


些 功 能 。 


首先 需要 创建 一 个 子 类 ， 其 代码 如 下 : 
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61 let cid = 1 


92 

63 Vue.extend = function (extendOptions) { 

84 extendOptions = extendoptions || {} 

@5 const Super = this 

066 const SuperId = Super.cid 

87 const cachedCtors = extendOptions. Ctor || (extendOptions. Ctor = {}) 
88 if (cachedCtors[SuperId]) { 

69 return cachedCtors[SuperId] 

16 } 

11 const name = extendoptions.name || Super.options.name 

12 if (process.env.NODE_ENV !== "production ' ) { 

13 if (!/^[a-zA-Z][\w-]*$/.test(name)) { 

14 warn( 

15 'Invalid component name: "' + name + '". Component names ' + 
16 "can only contain alphanumeric characters and the hyphen, ”+ 
17 "and must start with a letter. 

18 ) 

19 } 

26 } 

21 const Sub = function VueComponent (options) { 

22 this. init(options) 

23 } 

24 

25 // 缓存 构造 函数 

26 cachedCtors[SuperId] = Sub 

27 return Sub 

28 } 


为 了 性 能 考虑 ， 我 们 在 Vue .extend 方法 内 首先 增加 了 缓存 策略 。 反 复 调用 Vue.extend 其 
实 应 该 返回 同一 个 结果 。 只 要 返回 结果 是 固定 的 ， 就 可 以 将 计算 结果 缓存 ， 再 次 调用 extend 方 
法 时 ， 只 需要 从 缓存 中 取出 结果 即 可 。 

代码 中 使 用 父 类 的 id 作为 缓存 的 key， 将 子 类 缓存 在 cachedCtors 中 。 

此 外 ， 还 可 以 看 到 对 name 的 校 验 ， 如 果 发 现 name 选项 不 合格 ， 会 在 开发 环境 下 发 出 警告 。 

最 后 ,在 代码 中 创建 子 类 并 将 它 返 回 ， 这 一 步 并 没有 继承 的 逻辑 ， 此 时 子 类 是 不 能 用 的 ， 它 
还 不 具备 Vue 的 能 力 。 接 下 来 ， 我 们 将 介绍 子 类 是 如 何 继承 Vue 的 能 力 的 。 
首先 ， 将 父 类 的 原型 继承 到 子 类 中 : 


61  // 新 增 继承 原型 

62 Sub.prototype = Object.create(Super.prototype) 
93 Sub.prototype.constructor = Sub 

64 Sub.cid = cid++ 


这 里 新 增 了 原型 继承 的 逻辑 ， 并 且 为 子 类 添加 了 cid， 它 表示 每 个 类 的 唯一 标识 。 


接 下 来 ， 将 父 类 的 options 选项 继承 到 子 类 中 ， 代 码 如 下 : 


61 // 新 增 
62 Sub.options = mergeOptions( 
63 Super.options， 
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84 extendoptions 
65 ) 
66 Sub['super'] = Super 


这 里 合并 了 父 类 选项 与 子 类 选项 的 逻辑 ， 并 将 父 类 保存 到 子 类 的 super 属性 中 。 而 
mergeOptions 方法 会 将 两 个 选项 合并 为 一 个 新 对 象 。 
接 下 来 ， 如 果 选 项 中 存在 props 属性 ， 则 初始 化 它 ， 代 码 如 下 : 


81 // 新 增 

92 if (Sub.options.props) { 
03 initProps(Sub) 

64 } 


初始 化 props 的 作用 是 将 key 代理 到 _props 中 。 例 如 ，vm.name 实际 上 可 以 访问 到 的 是 
Sub .prototype._props.name。 实 现 原理 如 下 : 
61 function initProps (Comp) { 


62 const props = Comp.options.props 

63 for (const key in props) { 

64 proxy(Comp .prototype， `_props`  ，Kkey) 

65 } 

66 } 

e7 

68 function proxy (target, sourceKey, key) { 

69 sharedPropertyDefinition.get = function proxyGetter () { 

16 return this[sourceKey][key] 

11 } 

12 sharedPropertyDefinition.set = function proxySetter (val) { 
13 this[sourceKey][key] = val 

14 

15 Object.defineProperty(target, key, sharedpPropertyDefinition) 
16 } 

此 后 ， 如 果 选 项 中 存在 computed， 则 对 它 进行 初始 化 。 代 码 如 下 : 
81 // 新 增 

92 if (Sub.options.computed) { 

03 initComputed(Sub) 

64 } 


初始 化 computed 的 逻辑 并 不 难 ， 只 是 将 computed 对 象 遍历 一 毅 ， 并 将 里 面 的 每 一 项 都 定 
义 一 遍 即 可 ， 代 码 如 下 : 


91 function initComputed (Comp) { 


02 const computed = Comp.options.computed 

63 for (const key in computed) { 

@4 defineComputed(Comp.prototype, key, computed[key]) 
65 } 

06 } 


这 里 通过 defineComputed 方法 对 computed 对 象 中 的 每 一 项 进行 定义 。 关 于 如 何 定义 computed， 
我 们 会 在 后 面 介 绍 其 原理 时 详细 说 明 。 


接 下 来 ， 要 将 父 类 中 存在 的 属性 依次 复制 到 子 类 中 ， 代 码 如 下 : 


人 0 
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61  // 新 增 

602 Sub.extend = Super.extend 
63 Sub.mixin = Super.mixin 
64 Sub.use = Super.use 


86 // ASSET_TYPES = ['component', 'directive', 'filter'] 
87 ASSET_TYPES.forEach(function (type) { 
88 Sub[type] = Super[type] 


869 }) 

106 

11 if (name) { 

12 Sub.options.components[name] = Sub 
13 } 

14 


15 Sub.superOptions = Super.options 
16 Sub.extendOptions = extendOptions 
17 Sub.sealedOptions = extend({}, Sub.options) 


这 里 复制 到 子 类 中 的 方法 包括 extend、mixin、use、component、directive 和 filter。 
同时 ， 在 子 类 上 新 增 了 superoptions 、extendoptions 和 sealedoptions 属性 。 


完整 的 代码 如 下 : 

61 let cid=1 

62 

63 Vue.extend = function (extendOptions) { 

0@4 extendOptions = extendoptions || {} 

@5 const Super = this 

86 const SuperId = Super.cid 

87 const cachedCtors = extendOptions. Ctor || (extendOptions. Ctor = {}) 
88 if (cachedCtors[SuperId]) { 

69 return cachedCtors[SuperId] 

16 } 

11 const name = extendoptions .name || Super.options.name 
12 if (process.env.NODE_ENV !== "production' ) { 

13 if (!/^[a-zA-Z][\w-]*$/.test(name)) { 

14 warn( 

15 "Invalid component name: "' + Name + '". Component names ' + 
16 "can only contain alphanumeric characters and the hyphen, ”+ 
17 "and must start with a letter.' 

18 ) 

19 } 

26 } 

21 const Sub = function VueComponent (options) { 

22 this. init(options) 

23 } 

24 Sub.prototype = Object.create(Super.prototype) 

25 Sub .prototype.constructor = Sub 

26 Sub.cid = cid++ 

27 

28 Sub.options = mergeOptions( 

29 Super .options, 

36 extendOptions 


31 ) 
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32 Sub['super'] = Super 

33 

34 if (Sub.options.props) { 

35 initProps(Sub) 

36 } 

37 

38 if (Sub.options.computed) { 

39 initComputed(Sub) 

40 } 

41 

42 Sub.extend = Super.extend 

43 Sub.mixin = Super.mixin 

44 Sub.use = Super.use 

45 

46 // ASSET_TYPES = ['component', 'directive', 'filter'] 
47 ASSET_TYPES.forEach(function (type) { 
48 Sub[type] = Super[type] 

49 }) 

56 

51 if (name) { 

52 Sub.options.components[name] = Sub 
53 } 

54 

55 Sub.superOptions = Super.options 

56 Sub .extendoptions = extendOptions 

57 Sub.sealedOptions = extend({}, Sub.options) 
58 

59 // 缓存 构造 函数 

66 cachedCtors[SuperId] = Sub 

61 return Sub 

62 } 


总 体 来 讲 , 其 实 就 是 创建 了 一 个 Sub 函数 并 继承 了 父 级。 如 果 直 接 使 用 Vue.extend, 则 sub 
继承 于 Vue 构造 函数 。 


13.4.2 Vue.nextTick 
其 用 法 如 下 : 


91 Vue.nextTick( [callback, context] ) 
口 参数 : 


{Function} [callback] 
@m {Object} [context] 


口 用 法 : 在 下 次 DOM 更 新 循环 结束 之 后 执行 延迟 回调 ， 修 改 数据 之 后 立即 使 用 这 个 方法 
获取 更 新 后 的 DOM。 
口 示例 : 


61 // 修改 数据 
92 vm.msg = 'Hello' 
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63  // DOM 还 没有 更 新 

64 Vue.nextTick(function () { 
85 // DOM 更 新 了 

66 }) 


68 ”// 作为 一 个 Promise 使 用 (这 是 Vue.js 2.1.6 版 本 新 增 的 ) 
69 Vue.nextTick() 

16 .then(function () { 

1 // DOM 更 新 了 

12 )) 


Vue.nextTick 的 实现 原理 与 我 们 前 面 介 绍 的 vm.$nextTick 一 样 ， 代 码 如 下 : 


61 import { nextTick } from '../util/index' 


93 Vue.nextTick = nextTick 


在 上 面 的 代码 中 ， 我 们 在 Vue.js 上 添加 了 nextTick 方法 ， 这 里 不 再 重复 介绍 该 方法 的 具体 
实现 。 


13.4.3 Vue.set 
其 用 法 如 下 : 


61 Vue.set( target, key, value ) 
口 参数 : 
m {Object | Array} target 
m {string | number} key 
@m {any} value 
口 返回 值 : 设置 的 值 。 
口 用 法 : 设置 对 象 的 属性 。 如 果 对 象 是 响应 式 的 ， 确 保 
触发 视图 更 新 。 这 个 方法 主要 用 于 避 开 Vue 不 能 检测 属 + 


al 
度 


生 被 创建 后 也 是 响应 式 的 ， 同 时 
被 添加 的 限制 。 


本 
出 


| 


注意 ”对象 不 能 是 Vue.js 实例 或 者 Vuejs 实例 的 根 数据 对 象 。 ee 


Vue.set 与 vm.$set 的 实现 原理 相同 ， 代 码 如 下 : 


61 import { set } from '../observer/index' 
82 Vue.set = set 


上 面 的 代码 为 Vue 新 增 了 set 方法 ， 而 set 的 具体 实现 在 4.2 节 中 已 详细 介绍 过 
13.4.4 Vue.delete 
其 用 法 如 下 : 


61 Vue.delete( target, key ) 


184 第 13 章 ”实例 方法 与 全 局 API 的 实现 原理 


m {Object | Array} target 
m {string | number} key/index 

口 用 法 : 删除 对 象 的 属性 。 如 果 对 象 是 响应 式 的 ， 确 保 删 除 能 触发 更 新 视图 。 这 个 方法 主 
要 用 于 避 开 Vuejs 不 能 检测 到 属性 被 删除 的 限制 。 

Vue.delete 与 vm.$delete 的 实现 原理 相同 ， 代 码 如 下 : 


61 import { del } from '../observer/index'" 
62 Vue.delete = del 


上 面 代 码 为 Vue 新 增 了 delete 方法 ，4.3 节 中 对 delete 方法 进行 过 详细 说 明 。 


13.4.5 Vue.directive 
其 用 法 如 下 : 


61 Vue.directive( id, [definition] ) 


口 参数 : 


@m {string} id 
m {Function | Object} [definition] 


口 用 法 : 注册 或 获取 全 局 指令 。 


81 // 注册 

92 Vue.directive('my-directive', { 

83 bind: function () {}, 

84 inserted: function () {}, 

85 update: function () {}, 

66 componentUpdated: function () {}, 
87 unbind: function () {} 

e8 }) 

89 


16 // 注册 (指令 函数 ) 

11 Vue.directive('my-directive', function () { 
12 // 这 里 将 会 被 bind 和 update 调用 

13 }) 


15 // getter 方法 ， 返回 已 注册 的 指令 
16 var myDirective = Vue.directive('my-directive') 
除了 核心 功能 默认 内 置 的 指令 外 (Vv-model 和 v-show )，Vuejs 也 允许 注册 自 定义 指令 。 虽 
然 代 码 复 用 和 抽象 的 主要 形式 是 组 件 , 但 是 有 些 情况 下 ,仍然 需要 对 普通 DOM 元 素 进行 底层 操 
作 ， 这 时 就 会 用 到 自 定 义 指令 。 


这 里 需要 强调 Vue.directive 方法 的 作用 是 注册 或 获取 全 局 指令 ， 而 不 是 让 指令 生效 。 其 
区 别 是 注册 指令 需要 做 的 事 是 将 指令 保存 在 某 个 位 置 , 而 让 指令 生效 是 将 指令 从 某 个 位 置 拿 出 来 
执行 它 。 


人 
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四 
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所 以 注册 指令 的 实现 并 不 难 ， 代 码 如 下 : 


81  // 用 于 保存 指令 的 位 置 
62 Vue.options = Object.create(null) 
63 Vue.options['directives'] = Object.create(null) 


04 

65 Vue.directive = function (id, definition) { 

66 if (!definition) { 

87 return this.options['directives'][id] 

88 } else { 

89 if (typeof definition === 'function') { 

16 definition = { bind: definition, update: definition } 
11 } 

12 this.options['directives'][id] = definition 
13 return definition 

14 } 

15 } 


我 们 在 Vue 构造 函数 上 创建 了 options 属性 来 存放 选项 ， 并 在 选项 上 新 增 了 directive 方 
法 用 于 存放 指令 。 

Vue.directive 方法 接收 两 个 参数 id 和 definition， 它 可 以 注册 或 获取 指令 ， 这 取决 于 
definition 参数 是 否 存 在 。 如 果 definition 参数 不 存在 ， 则 使 用 id 从 this.options 
['directives'] 中 读 出 指令 并 将 它 返 回 ; 如 果 definition 参数 存在 ， 则 说 明 是 注册 操作 ， 那 
么 进而 判断 definition 参数 的 类 型 是 否 是 函数 。 

如 果 是 函数 , 则 默认 监听 bind 和 update 两 个 事件 , 所 以 代码 中 将 definition 函数 分 别 赋 
值 给 对 象 中 的 bind 和 update 这 两 个 方法 , 并 使 用 这 个 对 象 覆 盖 definition; 如 果 definition 
不 是 函数 ， 则 说 明 它 是 用 户 自 定义 的 指令 对 象 ， 此 时 不 需要 做 任何 操作 ， 直 接 将 用 户 提供 的 指令 
对 象 保存 在 this.options['directives'] 上 即 可 。 


13.4.6 Vue.filter 
其 方法 如 下 : 


61 Vue.filter( id, [definition] ) 


口 参数 : 


@m {string} id 
m {Function | Object} [definition] 


口 用 法 : 注册 或 获取 全 局 过 滤 央 。 


861 // 注册 

62 Vue.filter('my-filter', function (value) { 
63 // 返回 处 理 后 的 值 

64 }) 


66 // getter 方法 ， 返回 已 注册 的 过 滤器 
67 var myFilter = Vue.filter('my-filter') 
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Vuejs 允许 自 定 义 过 滤器 ， 可 被 用 于 一 些 常见 的 文本 格式 化 。 过 滤 需 可 以 用 在 两 个 地 方 : 双 花 
括号 插值 和 v-bind 表达 式 。 过 滤器 应 该 被 添加 在 JavaScript 表达 式 的 尾部 ， 由 “管道 ”符号 指示 : 

81 《<1-- 在 双 花 括号 中 --> 

62 {{ message | capitalize }} 


64  《!-- 在 v-bind 中 --> 
85 <div v-bind:id="rawId | formatId"></div> 


与 Vue.directive 类 似 ,Vue.filter 的 作用 仅仅 是 注册 或 获取 全 局 过 滤器 。 它 们 俩 的 注册 
过 程 也 很 类 似 ， 将 过 滤器 保存 在 Vue .options['filters'] 中 即 可 。 代 码 如 下 : 


@1 Vue.options['filters'] = Object.create(null) 


62 

63 Vue.filter = function (id, definition) { 

@4 if (!definition) { 

65 return this.options['filters'][id] 

66 } else { 

67 this.options['filters'][id] = definition 
68 return definition 

69 } 

10 } 


上 面 代码 在 Vue .options 中 新 增 了 filters 属性 用 于 存放 过 滤器 ， 并 在 Vue.js 上 新 增 了 
filter 方法 ， 它 接收 两 个 参数 : id 和 definition。Vue.filter 方法 可 以 注册 或 获取 过 滤器 ， 
这 取决 于 definition 参数 是 否 存在 ， 如 果 不 存在 ， 则 使 用 id 从 this.options['filters'] 中 
读 出 过 滤器 并 将 它 返 回 ; 如 果 definition 参数 存在 ， 则 说 明 是 注册 操作 ， 直 接 将 该 参数 保存 到 
this.options['filters'] 中 。 


13.4.7 Vue.component 
其 用 法 如 下 : 


61 Vue.component( id, [definition] ) 


口 参数 : 


@m {string} id 
m {Function | Object} [definition] 


口 用 法 : 注册 或 获取 全 局 组 件 。 注 册 组 件 时 ， 还 会 自动 使 用 给 定 的 id 设 置 组 件 的 名 称 。 相 


关 代码 如 下 : 

81 // 注册 组 件 ， 传 入 一 个 扩展 过 的 构造 器 

962 Vue.component('my-component', Vue.extend({ /* ... */ })) 
03 

864 // 注册 组 件 ， 传 入 一 个 选项 对 象 (自动 调用 Vue.extend) 

65 Vue.component('my-component', { /* ... */ }) 

86 


867 // 获取 注册 的 组 件 (始终 返回 构造 器 ) 
68 var MyComponent = Vue.component('my-component') 
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我 们 在 使 用 Vuejs 开发 项 目 时 ， 会 经 常 与 组 件 打交道 。 在 编写 组 件 库 时 ， 也 经 常会 用 到 
Vue.component 方法 。 因 此 ， 理 解 组 件 的 注册 原理 非常 重要 。 


与 Vue.directive 相同 ，Vue.component 只 是 注册 或 获取 组 件 。 注 册 组 件 的 实现 原理 很 简 


单 ， 只 需要 将 组 件 保存 在 某 个 地 方 即 可 ， 代 码 如 下 : 
61 Vue.options['components'] = Object.create(null) 
62 
63 Vue.component = function (id, definition) { 
84 if (!definition) { 
85 return this.options['components'][id] 
66 } else { 
87 if (isplainObject(definition)) { 
08 definition.name = definition.name || id 
69 definition = Vue.extend(definition) 
16 } 
11 this.options['components'][id] = definition 
12 return definition 
13 } 
14 } 


这 里 我 们 在 Vue.options 中 新 增 了 components 属性 用 于 存放 组 件 ， 并 在 Vuejs 上 新 增 了 
component 方法 ， 它 接收 两 个 参数 : id 和 definition。 


Vue.component 方法 可 以 注册 或 获取 过 滤器 ， 这 取决 于 definition 参数 是 否 存 在 : 如 果 不 
存在 ， 则 使 用 id 从 this.options['components'] 中 读 出 组 件 并 将 它 返 回 ; 如 果 definition 
参数 存在 ， 则 说 明 是 注册 操作 ,那么 需要 将 组 件 保存 到 this.options['components'] 中 。 由 于 
definition 参数 支持 两 种 参数 ,分别 是 选项 对 象 和 构造 器 ， 而 组 件 其 实 是 一 个 构造 函数 ， 是 使 
用 Vue .extend 生成 的 子 类 ， 所 以 需要 将 参数 definition 统一 处 理 成 构造 器 。 

在 代码 中 可 以 看 到 一 行 逻辑 是 ， 如 果 发 现 definition 参数 是 0bject 类 型 ， 则 调用 
Vue.extend 方法 将 它 变 成 vue 的 子 类 , 使 用 Vue .component 方法 注册 组 件 ; 如 果 选 项 对 象 中 没 
有 设置 组 件 名 ， 则 自动 使 用 给 定 的 id 设置 组 件 的 名 称 。 所 以 代码 中 可 以 看 到 这 样 一 行 代码 : 


61 definition.name = definition.name || id 


你 会 发 现 Vue.directive .Vue.filter 和 Vue.component 这 三 个 方法 的 实现 方式 非常 相似 ， 
代码 很 多 都 是 重复 的 。 但 是 为 了 方便 理解 ， 这 里 我 将 这 三 个 方法 分 别 拆 开 单独 介绍 。 事实 上 , 在 
Vuejs 的 源码 中 ， 这 三 个 方法 是 放 在 一 起 实现 的 ， 具 体 如 下 : 


61 Vue.options = Object.create(null) 
@2 // ASSET_TYPES = ['component', 'directive', 'filter'] 
@3 ASSET_TYPES.forEach(type => { 


84 Vue.options[type + 's'] = Object.create(null) 
e5 }) 

@6 ASSET_TYPES.forEach(type => { 

87 Vue[type] = function (id, definition) { 

88 if (!definition) { 

69 return this.options[type + 's'][id] 


16 } else { 


188 第 13 章 ”实例 方法 与 全 局 API 的 实现 原理 


11 if (type === 'component' && isplainObject(definition)) { 
12 definition.name = definition.name || id 

13 definition = Vue.extend(definition) 

14 

15 if (type === 'directive' && typeof definition === 'function') { 
16 definition = { bind: definition, update: definition } 
1 } 

18 this.options[type + 's'][id] = definition 

19 return definition 

26 } 

21 } 

22 })) 


13.4.8 Vue.use 
其 用 法 如 下 : 


01 Vue.use( plugin ) 
口 参数 : 


m {Object | Function} plugin 


口 用 法 : 安装 Vue.js 插件 。 如 果 插 件 是 一 个 对 象 ， 必 须 提供 install 方法 。 如 果 搬 件 是 一 
个 函数 ， 它 会 被 作为 install 方法 。 调 用 install 方法 时 ， 会 将 vue 作为 参数 传人 。 
install 方法 被 同一 个 插件 多 次 调用 时 ， 插 件 也 只 会 被 安装 一 次 。 
vue.use 的 作用 是 注册 插件 , 此 时 只 需要 调用 instal1 方法 并 将 vue 作为 参数 传人 即 可 。 但 
在 细节 上 其 实 有 两 部 分 逻辑 需要 处 理 : 一 部 分 是 插件 的 类 型 , 可 以 是 install 方法 , 也 可 以 是 一 
个 包含 install 方法 的 对 象 ; 男 一 部 分 逻辑 是 插件 只 能 被 安装 一 次 , 保证 插件 列表 中 不 能 有 重复 
的 插件 。 其 代码 如 下 : 


@1 Vue.use = function (plugin) { 


02 const installedPlugins = (this. installedPlugins || (this. installedPlugins = [])) 
03 if (installedPlugins.indexof(plugin) > -1) { 
64 return this 

65 } 

86 

67 // 其 他 参数 

68 const args = toArray(arguments, 1) 

69 args.unshift(this) 

16 if (typeof plugin.install === 'function') { 
11 plugin.install.apply(plugin, args) 

12 } else if (typeof plugin === 'function'’) { 
13 plugin.apply(null, args) 

14 } 

15 installedPlugins.push(plugin) 

16 return this 

17 } 


这 里 我 们 在 Vuejs 上 新 增 了 use 方法 ， 并 接收 一 个 参数 plugin。 在 该 方法 中 ， 首 先 判断 插件 
是 不 是 已 经 被 注册 过 ， 如 果 被 注册 过 ， 则 直接 终止 方法 执行 ， 此 时 只 需要 使 用 indexof 方法 即 可 。 


/ 
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接 下 来 , 使 用 toArray 方法 得 到 arguments。 除 了 第 一 个 参数 之 外 , 剩余 的 所 有 参数 将 得 到 
的 列表 赋值 给 args， 然 后 将 Vue 添加 到 args 列表 的 最 前 面 。 这 样 做 的 目的 是 保证 install 方 


法 被 执行 时 第 一 个 参数 是 Vue ， 其 余 参 


由 于 plugin 参数 支持 对 象 和 函数 类 


参数 是 注册 插件 时 传人 的 参数 。 
型 ,所 以 通过 判断 plugin.install 和 plugin 哪个 是 函 


数 , 即 可 得 知 用 户 使 用 哪 种 方式 注册 的 插件 , 然后 执行 用 户 编写 的 插件 并 将 args 作为 参数 传人 。 
最 后 ， 将 插件 添加 到 installedPlugins 中 ,保证 相同 的 插件 不 会 反复 被 注册 。 


13.4.9 Vue.mixin 
其 用 法 如 下 : 


61 Vue.mixin( mixin ) 
口 参数 : 


@m {Object} mixin 


以 使 用 混入 向 组 件 注入 自 定义 
使 用 。 该 方法 的 代码 如 下 : 


口 用 法 : 全 局 注册 一 个 混入 (mixin ) ， 影响 注册 之 后 创建 的 每 个 Vuejs 实例 。 插 件 作 者 可 


了 为 (例如 : 监听 生命 周期 钩子 ) 。 不 推荐 在 应 用 代码 中 


61 // 为 自 定义 的 选项 myOption 注入 一 个 处 理 器 


62 Vue.mixin({ 


63 created: function () { 

64 var myOption = this.$options.myOption 
65 if (myOption) { 

66 console.log(myOption) 
67 } 

68 } 

869 )}) 

16 

11 new Vue({ 

12 myOption: “hel1ol 

13 })) 


14 // => "hello!" 


Vue.mixin 方法 注册 后 ,会 影响 之 后 创建 的 每 个 Vue.js 实例 ,因为 该 方法 会 更 改 Vue .options 


属性 。 
实现 原理 并 不 复杂 , 只 是 将 用 户 传 人 的 对 象 与 Vuejs 自身 的 options 属性 合并 在 一 起 , 代 

人 

61 import { mergeOptions } from '../util/index' 

62 

@3 export function initMixin (Vue) { 

84 Vue.mixin = function (mixin) { 

85 this.options = mergeOptions(this.options, mixin) 

66 return this 

67 } 


68 } 
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其 中 ，mergeOptions 方法 会 将 用 户 传 人 的 mixin 与 this .options 合并 成 一 个 新 对 象 ， 然 后 将 
这 个 生成 的 新 对 象 履 盖 this .options 属性 ， 这 里 的 this.options 其 实 就 是 Vue.options。 

因为 mixin 方法 修改 了 Vue.options 属性 ， 而 之 后 创建 的 每 个 实例 都 会 用 到 该 属性 ， 所 以 
会 影响 创建 的 每 个 实例 。 但 也 正 是 因为 有 影响 ， 所 以 mixin 在 某 些 场 景 下 才 堪 称 神器 。 


13.4.10 Vue.compile 
其 用 法 如 下 : 


@1 Vue.compile( template ) 


m {string} template 
口 用 法 : 编译 模板 字符 串 并 返回 包含 演 染 函数 的 对 象 。 只 在 完整 版 中 才 有 效 。 其 代码 如 下 : 


61 var res = Vue.compile('<div><span>{{ msg }}</span></div>') 


62 

63 new Vuel({ 

84 data: { 

85 msg: 'hello’ 

66 }， 

07 render: res.render 
e8 }) 


并 不 是 所 有 Vuejjs 的 构建 版 本 都 存在 Vue.compile 方法 ,与 vm.$mount 类 似 , Vue .compile 
方法 只 存在 于 完整 版 中 。 前 面 我 们 介绍 过 只 有 完整 版 包含 编译 器 ， 所 以 Vue .compile 方法 只 存 
在 于 完整 版 也 并 不 奇怪 。 

Vue.compile 方法 只 需要 调用 编译 需 就 可 以 实现 功能 ， 其 代码 如 下 : 

91 Vue.compile = compileToFunctions 
其 中 compileToFunctions 方法 可 以 将 模板 编译 成 演 染 函数 。 在 13.3.4 节 中 , 我 们 介绍 过 此 方法 
的 实现 原理 ， 这 里 不 再 重复 介绍 。 


13.4.11 Vue.version 
下 面 简要 介绍 一 下 该 方法 。 


口 细节 : 提供 字符 串 形式 的 Vuejs 安装 版 本 号 。 这 对 社区 的 插件 和 组 件 来 说 非常 有 用 ， 你 
可 以 根据 不 同 的 版 本 号 采取 不 同 的 策略 。 


口 用 法 : 
61 var version = Number(Vue.version.split('.')[8]) 
02 
63 if (version === 2) { 
04 // Vue.js v2.x.x 


65 } else if (version === 1) { 


066 // Vue.js v1.x.x 

67 } elsef{ 

08 ”// 不 支持 的 Vue.js 版 本 
69 } 


其 中 , Vue.version 是 一 个 属性 。 在 构建 文件 的 过 程 中 , 我 们 会 读 取 package.json 文件 中 的 version， 

并 将 读 取出 的 版 本 号 设置 到 Vue.version 上 。 

具体 实现 步骤 是 :Vue.js 在 构建 文件 的 配置 中 定义 了 __VERSION _ 常量 , 使 用 rollup-plugin- 

replace 插件 在 构建 的 过 程 中 将 代码 中 的 常量 _VERSION__ 替换 成 package.json 文件 中 的 版 本 号 。 
rollup-plugin-replace 插件 的 作用 是 在 构建 过 程 中 替换 字符 串 。 所 以 在 代码 中 只 需要 将 _ VERSION _ 

赋值 给 Vue .version 就 可 以 在 构建 时 将 package.json 文件 中 的 版 本 号 赋值 给 Vue.version。 


61 Vue.version = '_ VERSION _' 
在 构建 完成 后 ， 它 将 类 似 下 面 这 样 : 
01 Vue.version = '2.5.2" 


13.5 ”总 结 

本 章 中 , 我 们 详细 介绍 了 Vuejjs 的 实例 方法 和 全 局 API 的 实现 原理 。 它 们 的 区 别 在 于 : 实例 
方法 是 Vue .prototype 上 的 方法 ， 而 全 局 API 是 Vue.js 上 的 方法 。 

实例 方法 又 分 为 数据 、 事 件 和 生命 周期 这 三 个 类 型 。 

在 介绍 实例 方法 以 及 全 局 API 的 实现 原理 的 同时 ， 我 们 还 介绍 了 扩展 知识 ， 例 如 在 介绍 
vm.$nextTick 时 我 们 介绍 了 JavaScript 事件 循环 机 制 ， 以 及 微 任务 和 安 任 务 之 间 的 区 别 等 。 


生命 


Ln 


期 


每 个 Vuejs 实例 在 创建 时 都 要 经 过 一 系列 初始 化 , 例如 设置 数据 监听 、 编 译 模 板 、 将 实例 挂 
载 到 DOM 并 在 数据 变化 时 更 新 DOM 等 。 同 时 ， 也 会 运行 一 些 叫 作 生命 周期 钩子 的 函数 ， 这 给 
了 我 们 在 不 同 阶段 添加 自 定 义 代 码 的 机 会 。 


本 章 详细 介绍 Vue js 的 生命 周期 原理 ， 我 们 将 一 起 探索 Vue js 实例 被 创建 时 都 经 历 了 什么 。 
14.1 生命 周期 图 示 


14-1 给 出 了 Vuejs 实例 的 生命 周期 ， 可 以 分 为 4 个 阶段 : 初始 化 阶段 、 模 板 编译 阶段 、 
挂 载 阶 段 、 印 载 阶 段 。 


初始 化 
Events & Lifecycle . 
初始 化 阶段 
初始 化 
injections & reactivity 
ee 
1 
当 
vm.$mount(el) 
被 调用 时 


图 14-1 生命 周期 图 示 
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模板 编译 阶段 


通过 el 选项 获取 本 板 


将 模板 编译 为 浑 ; 


beforeMount kk-----=-- 寺 


1 
i 
当 状 态 发 生变 化 时 


/ 
/ 
/ 
/ A 


使 用 虚拟 DOM 已 挂 载 


一 


被 调用 时 


Vy 


印 载 依赖 过 踪 ， 子 组 件 
与 事件 监听 器 


印 载 阶段 


图 14-1 ( 续 ) 


14.1.1 初始 化 阶段 
如 图 14-1 所 示 ，new Vue() 到 created 之 间 的 阶段 叫 作 初始 化 阶段 。 
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这 个 阶段 的 主要 目的 是 在 Vuejs 实例 上 初始 化 一 些 属 性 、 事 件 以 及 响应 式 数据 ， 如 props、 
methods 、data、computed、watch、provide 和 inject 等 。 
14.1.2 ”模板 编译 阶段 
如 图 14-1 所 示 ,在 created 钧 子 函 数 与 beforeMount 钩子 函数 之 间 的 阶段 是 模板 编译 阶段 。 
这 个 阶段 的 主要 目的 是 将 模板 编译 为 泻 当 函数 ,只 存在 于 完整 版 中 。 如 果 在 只 包含 运行 时 的 


构建 版 本 中 执行 new Vue() ， 则 不 会 存在 这 个 阶段 。 相 关内 容 在 13.3.4 节 中 介绍 vm. $mount 的 实 
现 原理 时 有 过 详细 介绍 。 


第 12 章 介绍 过 ， 当 使 用 vue-loader 或 vueify 时 ，*.vue 文件 内 部 的 模板 会 在 构建 时 预 编 
译 成 JavaScript， 所 以 最 终 打 好 的 包 里 是 不 需要 编译 器 的 ， 用 运行 时 版 本 即 可 。 由 于 模板 这 时 已 
经 预 编 译 成 了 泻 染 函数 , 所 以 在 生命 周期 中 并 不 存在 模板 编译 阶段 , 初始 化 阶段 的 下 一 个 生命 周 
期 直接 是 挂 载 阶段 。 

14.1.3 ” 挂 载 阶 段 

如 图 14-1 所 示 ，beforeMount 钩子 函数 到 mounted 钧 子 函 数 之 间 是 挂 载 阶段 。 

在 这 个 阶段 ，Vue.js 会 将 其 实例 挂 载 到 DOM 元 素 上 ,通俗 地 讲 ， 就 是 将 模板 演 染 到 指定 的 
DOM 元 素 中 。 在 挂 载 的 过 程 中 ，Vue.js 会 开启 Watcher 来 持续 追踪 依赖 的 变化 。 


在 已 挂 载 状 态 下 ，Vue.js 仍 会 持续 追踪 状态 的 变化 。 当 数据 (状态 ) 发 生变 化 时 ，Watcher 
会 通知 虚拟 DOM 重新 泻 染 视 图 ， 并 日 会 在 演 染 视图 前 触发 beforeUpdate 钩子 函数 ， 演 染 完 毕 
后 触发 updated 钧 子 函 数 。 


我 们 在 13.3.4 节 中 介绍 只 包含 运行 时 版 本 vm.$mount 的 实现 原理 时 详细 说 明了 挂 载 阶段 的 
内 部 实现 原理 。 


通常 ， 在 运行 时 的 大 部 分 时 间 下 ，Vuejs 处 于 已 挂 载 状 态 ， 每 当 状 态 发 生变 化 时 ，Vuejs 都 
会 通知 组 件 使 用 虚拟 DOM 重新 演 染 , 也 就 是 我 们 常 说 的 响应 式 。 这 个 状态 会 持续 到 组 件 被 销毁 。 
14.1.4 ”外 载 阶段 

如 图 14-1 所 示 ， 应 用 调用 vm.$destroy 方法 后 ，Vue.js 的 生命 周期 会 进入 印 载 阶段 。 


在 这 个 阶段 ，Vuejs 会 将 自身 从 父 组 件 中 删除 ， 取 消 实例 上 所 有 依赖 的 追踪 并 且 移 除 所 有 的 
事件 监听 器 。 


14.1.5 小结 


在 本 节 中 ， 我 们 通过 图 14-1 介绍 了 Vuejjs 在 实例 化 后 的 各 个 阶段 ， 不 难 发 现 ， 其 生命 周期 可 
以 在 整体 上 分 为 两 部 分 : 第 一 部 分 是 初始 化 阶段 、 模 板 编译 阶段 与 挂 载 阶段 , 第 二 部 分 是 伙 载 阶段 。 
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在 上 一 节 的 最 后 ,我 们 介绍 过 Vuejs 的 生命 周期 大 体 可 以 分 为 两 部 分 。 事实 上 , 印 载 阶段 的 
内 部 原理 就 是 vm.$destroy 方法 的 内 部 原理 ， 这 在 13.3.2 节 中 已 经 详细 介绍 过 ， 这 里 不 再 重复 
介绍 。 本 节 主 要 介绍 初始 化 阶段 的 内 部 原理 ， 模 板 编译 阶段 和 挂 载 阶 段 的 原理 参见 其 他 章节 。 


new Vue() 被 调用 时 发 生 了 什么 


想 要 了 解 new Vue() 被 调用 时 发 生 了 什么 ,我 们 需要 知道 在 Vue 构造 函数 中 实现 了 哪些 逻辑 。 
前 面 介绍 过 ， 当 new Vue() 被 调用 时 ， 会 首先 进 行 一 些 初 始 化 操作 ， 然 后 进入 模板 编译 阶段 ， 最 
后 进入 挂 载 阶段 。 


具体 实现 是 这 样 的 : 
61 function Vue (options) { 
82 if (process.env.NODE_ENV !== "production' && 
!(this instanceof Vue) 
03 ) { 
64 warn('Vue is a constructor and should be called with the ‘new keyword') 
85 
66 this. init(options) 
67 } 
68 


69 export default Vue 

从 上 面 的 代码 中 可 以 看 出 , 构造 函数 中 的 逻辑 很 简单 。 首先 进行 安全 检查 , 在 非 生产 环境 下 ， 
如 果 没 有 使 用 new 来 调用 Vue, 则 会 在 控制 台 抛 出 错误 警告 我 们 : Vue 是 构造 函数 , 应 该 使 用 new 
关键 字 来 调用 。 

然后 调用 this._init(options) 来 执行 生命 周期 的 初始 化 流程 。 也 就 是 说 ， 生 命 周期 的 初 
始 化 流程 在 this ._init 中 实现 。 

那么 ,this. init 是 在 哪里 定义 的 ， 它 的 内 部 原理 是 怎样 的 呢 ? 

1. _init 方法 的 定义 

在 第 13 章 的 开头 ， 我 们 简单 介绍 了 _init 是 如 何 被 挂 载 到 Vue.js 的 原型 上 的 。Vuejs 通过 
调用 initMixin 方法 将 _init 挂 载 到 Vue 构造 函数 的 原型 上 ， 其 代码 如 下 : 


61 import { initMixin } from './init" 


62 

63 function Vue (options) { 

64 if (process.env.NODE_ENV !== 'production' && 

05 !(this instanceof Vue) 

686 ) { 

87 warn('Vue is a constructor and should be called with the ‘new ”keyword ' ) 
088 

69 this. init(options) 

10 } 
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12 initMixin(Vue) 

14 export default Vue 

将 initjs 文件 导出 的 initMixin 函数 引入 后 ， 通 过 调用 initMixin 函数 向 Vue 构造 函数 的 
原型 中 挂 载 一 些 方法 。initMixin 方法 的 实现 代码 如 下 : 


61 export function initMixin (Vue) { 


82 Vue.prototype._init = function (options) { 
63 // 做 些 什么 

084 } 

65 } 


可 以 看 到 ， 只 是 在 Vue 构造 函数 的 prototype 属性 上 添加 了 一 个 _init 方法 。 也 就 是 说 ， 
_init 方法 的 定义 与 我 们 在 第 13 章 中 介绍 的 Vue.js 实例 方法 的 挂 载 方式 是 相同 的 。 

2. _init 方法 的 内 部 原理 

当 new Vue() 执 行 后 ， 触 发 的 一 系列 初始 化 流程 都 是 在 _init 方法 中 启动 的 。_init 的 实现 
如 下 : 


@1 Vue.prototype._init = function (options) { 


62 vm.$options = mergeOptions( 

03 resolveConstructorOptions(vm.constructor), 
64 options || {}, 

85 Vm 

66 ) 

e7 

68 initLifecycle(vm) 

69 initEvents(vm) 

16 initRender(vm) 

11 callHook(vm, "beforeCreate ' ) 

12 initInjections(vm) // 在 data/props 前 初始 化 inject 
13 initState(vm) 

14 initProvide(vm) // 在 data/props 后 初始 化 provide 
15 callHook(vm, 'created') 

16 


17 // 如 果 用 户 在 实例 化 Vue.Jjs 时 传递 了 el 选项 ， 则 自动 开启 模板 编译 阶段 与 挂 载 阶段 
18 // 如 果 没 有 传递 el 选项 ， 则 不 进入 下 一 个 生命 周期 流程 
19 // 用 户 需 要 执行 vm.$mount 方法 ， 手 动 开启 模板 编译 阶段 与 挂 载 阶 段 


20 

21 if (vm.$options.el) { 

22 vm.$mount (vm.$options.el) 
23 } 

24 } 


可 以 看 到 ，Vuejs 会 在 初始 化 流程 的 不 同时 期 通过 callHook 函数 触发 生命 周期 钩子 。 

值得 注意 的 是 ， 在 执行 初始 化 流程 之 前 ， 实 例 上 挂 载 了 $options 属性 。 这 部 分 代码 的 目的 
是 将 用 户 传递 的 options 选项 与 当前 构造 函数 的 options 属性 及 其 父 级 实例 构造 隙 数 的 options 
属性 ， 合 并 生成 一 个 新 的 options 并 赋值 给 $options 属性 。resolveConstructorOptions 哺 
数 的 作用 就 是 获取 当前 实例 中 构造 函数 的 options 选项 及 其 所 有 父 级 的 构造 函数 的 options。 之 
所 以 会 有 父 级 , 是 因为 当前 Vue.js 实例 可 能 是 一 个 子 组 件 , 它 的 父 组 件 就 是 它 的 父 级 。 我 们 不 需 
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要 关心 resolveConstructoroptions 的 具体 实现 ， 只 需要 知道 它 的 作用 即 可 。 


上 面 的 代码 也 体现 了 ， 在 生命 周期 钧 子 beforeCreate 被 触发 之 前 执行 了 initLifecycle、 
initEvents 和 initRender, 这 与 图 14-1 的 表达 一 致 。 在 初始 化 的 过 程 中 , 首先 初始 化 事件 与 属性 ， 
然后 触发 生命 周期 钩子 beforecreate。 随 后 初始 化 provide/inject 和 状态 ， 这 里 的 状态 指 的 是 
props 、methods 、data、computed 以 及 watch。 接 着 触发 生命 周期 钩子 created。 最 后 ， 判 断 用 
户 是 否 在 参数 中 提供 了 el 选项 ， 如 果 是 ， 则 调用 vm. $mount 方法 ， 进 入 后 面 的 生命 周期 阶段 。 


图 14-2 给 出 了 _init 方法 的 内 部 流程 图 ， 我 们 会 在 后 面 的 章节 中 依次 介绍 每 一 项 初始 化 的 
详细 实现 原理 。 
vm. $options 


l 


FE 
RE 


beforeCreate 一 


this._init() 


Cram) 


有 el 选项 ? 


vm.$mount(vm.$options.el) 


图 14-2 _init 方法 的 内 部 流程 图 
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3. callHook 函数 的 内 部 原理 
Vue.js 通过 callHook 函数 来 触发 生命 周期 钩子 ， 本 节 将 详细 介绍 其 实现 原理 。 


首先 , 我 们 需要 理解 callHook 所 实现 的 功能 。callHook 的 作用 是 触发 用 户 设置 的 生命 周期 
钩子 ， 而 用 户 设置 的 生命 周期 钩子 会 在 执行 new Vue() 时 通过 参数 传递 给 Vue.js。 也 就 是 说 ， 可 
以 在 Vuejjs 的 构造 函数 中 通过 options 参数 得 到 用 户 设置 的 生命 周期 钩子 。 
用 户 传 人 的 options 参数 最 终 会 与 构造 函数 的 options 属性 合并 生成 新 的 options 并 赋值 
到 vm.$options 属性 中 , 所 以 我 们 可 以 通过 vm.goptions 得 到 用 户 设置 的 生命 周期 函数 。 例 如 ; 
通过 vm.$options.created 得 到 用 户 设置 的 created 钩子 函数 。 

值得 注意 的 是 , Vuejjs 在 合并 options 的 过 程 中 会 找 出 options 中 所 有 key 是 钩子 函数 的 名 
字 ， 并 将 它 转换 成 数组 。 

下 面 列 出 了 所 有 生命 周期 钩子 的 函数 名 : 


口 beforeCreate 


DQ created 

口 beforeMount 
D mounted 

口 beforeUpdate 
DQ updated 

DQ beforeDestroy 
口 destroyed 

口 activated 

口 deactivated 


DQ errorCaptured 


岂 就 是 说 ， 通 过 vm. $options .created 获取 的 是 一 个 数组 ， 数 组 中 包含 了 钩子 函数 ， 例 如 : 

91 console.log(vm.$options.created) // [fn] 

我 们 可 能 会 不 理解 为 什么 要 这 样 做 ， 为 什么 要 把 生命 周期 钩子 转换 成 数组 ? 

这 个 问题 说 来 话 长 。 在 第 13 章 中 介绍 过 , Vue.mixin 方法 会 将 选项 写 人 Vue.options 中 , 因此 
它 会 影响 之 后 创建 的 所 有 Vuejs 实例 ， 而 Vuejs 在 初始 化 时 会 将 构造 函数 中 的 options 和 用 户 传人 
的 options 选项 合并 成 一 个 新 的 选项 并 赋值 给 vm. $options, 所 以 这 里 会 发 生 一 个 现象 : Vue.mixin 
和 用 户 在 实例 化 Vuejs 时 ， 如 果 设 置 了 同一 个 生命 周期 钩子 , 那么 在 触发 生命 周期 时 ， 需 要 同时 
触发 这 两 个 函数 。 而 转换 成 数组 后 ， 可 以 在 同一 个 生命 周期 钩子 列表 中 保存 多 个 生命 周期 钩子 。 

举 个 例子 : 使 用 Vue.mixin 设置 生命 周期 钩子 mounted 之 后 ， 在 执行 new Vue() 时 ， 会 在 
参数 中 也 设置 一 个 生命 周期 钩子 mounted， 这 时 vm. $options.mounted 是 一 个 数组 ， 里 面包 含 
两 个 生命 周期 钩子 。 
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那么 我 们 就 可 以 知道 ，callHook 的 实现 只 需要 从 vm.$options 中 获取 生命 周期 钩子 列表 ， 
遍历 列表 ， 执 行 每 一 个 生命 周期 钩子 ， 就 可 以 触发 钩子 函数 。 代 人 码 如 下 : 


61 export function callHook (vm, hook) { 


82 const handlers = vm.$options[hook] 

83 if (handlers) { 

84 for (let i = 6, j = handlers.length; i < j; i++) { 
65 try { 

66 handlers[i].call(vm) 

87 } catch (e) { 

88 handleError(e, vm, ‘${hook} hook  ) 
69 } 

16 } 

11 } 

12 } 


上 面 的 代码 给 出 了 callHook 的 实现 原理 ， 它 接收 vm 和 hook 两 个 参数 ， 其 中 前 者 是 Vuejs 
实例 的 this， 后 者 是 生命 周期 钩子 的 名 称 。 


在 上 述 代码 中 ， 我 们 使 用 hook 从 vm. $options 中 获取 钩子 函数 列表 后 赋值 给 handlers， 
随后 遍历 handlers， 执 行 每 一 个 钩子 子 数 。 


这 里 使 用 try.. .catch 语句 捕获 钩子 函数 内 发 生 的 错误 ， 并 使 用 handleError 人 处理 错误 。 
handleError 会 依次 执行 父 组 件 的 errorCaptured 钩子 困 数 与 全 局 的 config.errorHandler， 
这 也 是 为 什么 生命 周期 钩子 errorCaptured 可 以 捕获 子孙 组 件 的 错误 。 关 于 handleError 与 生 
命 周 期 钩子 errorCaptured， 我 们 会 在 随后 的 内 容 中 详细 介绍 。 


14.3 errorCaptured 与 错误 处 理 


errorCaptured 钩子 函数 的 作用 是 捕获 来 自 子 孙 组 件 的 错误 ， 此 钩子 函数 会 收 到 三 个 参数 : 
错误 对 象 、 发 生 错误 的 组 件 实例 以 及 一 个 包含 错误 来 源 信息 的 字符 串 。 然 后 此 钩子 函数 可 以 返回 
false， 阻 止 该 错误 继续 向 上 传播 。 

其 传播 规则 如 下 。 


口 默认 情况 下 ， 如 果 全 局 的 config.errorHandler 被 定义 ， 那么 所 有 的 错误 都 会 发 送 给 

它 ， 这 样 这 些 错 误 可 以 在 单个 位 置 报告 给 分 析 服 务 。 

口 如 果 一 个 组 件 继承 的 链 路 或 其 父 级 从 属 链 路 中 存在 多 个 errorCaptured 钩子 ， 则 它们 将 

会 被 相同 的 错误 逐个 唤起 。 

口 如 果 errorCaptured 钩子 函数 自身 抛 出 了 一 个 错误 ， 则 这 个 新 错误 和 原本 被 捕获 的 错误 

都 会 发 送 给 全 局 的 config.errorHandler。 

口 一 个 errorCaptured 钩子 函数 能 够 返回 false 来 阻止 错误 继续 向 上 传播 。 这 本 质 上 是 说 
“这 个 错误 已 经 被 搞定 ， 应 该 被 忽略 ”。 它 会 阻止 其 他 被 这 个 错误 唤起 的 errorCaptured 

钧 子 函 数 和 全 局 的 config.errorHandler。 
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了 解 了 errorCaptured 钩子 函数 的 作用 后 ， 我 们 将 详细 讨论 它 是 如 何 被 触发 的 。 


事实 上 ，errorCaptured 钩子 国 数 与 Vuejjs 的 错误 处 理 有 着 千 丝 万 缕 的 关系 。Vue.js 会 捕获 
所 有 用 户 代码 抛 出 的 错误 ， 然 后 会 使 用 一 个 名 叫 handleError 的 函数 来 处 理 这 些 错误 。 
用 户 编 写 的 所 有 函数 都 是 Vuejs 调用 的 ， 例 如 用 户 在 代码 中 注册 的 事件 、 生 命 周期 钩子 、 泻 
染 函 数 、 函 数 类 型 的 data 属性 、vm. $watch 的 第 一 个 参数 〈 函数 类 型 )、nextTick 和 指令 等 。 
而 Vuejjs 在 调用 这 些 函 数 时 ， 会 使 用 try. . .catch 语句 来 捕获 有 可 能 发 生 的 错误 。 当 错误 
发 生 并 且 被 try.. .catch 语句 捕获 后 ，Vuejs 会 使 用 handleError 函数 来 处 理 错误 ， 该 函数 会 
依次 触发 父 组 件 链 路 上 的 每 一 个 父 组 件 中 定义 的 errorCaptured 钩子 函数 。 如 果 全 局 的 
config.errorHandler 被 定义 ， 那 么 所 有 的 错误 也 会 同时 发 送 给 config.errorHandler。 也 就 
是 说 ， 错 误 的 传播 规则 是 在 handleError 函数 中 实现 的 。 
handleError 函数 的 实现 原理 并 不 复杂 。 根 据 前 面 的 传播 规则 ， 我 们 先 实现 第 一 个 需求 : 将 
所 有 错误 发 送 给 config.errorHandler。 相 关 代码 如 下 : 


61 export function handleError (err, vm, info) { 


02 // 这 里 的 config.errorHandler 就 是 Vue.config.errorHandler 
63 if (config.errorHandler) { 

64 try { 

65 return config.errorHandler.call(null, err, vm, info) 
66 } catch (e) { 

07 logError(e) 

68 } 

99 

16 logError(err) 

11 } 

42 

13 function logError (err) { 

14 console.error(err) 

15 } 


可 以 看 到 ， 这 里 先 判断 Vue.config.errorHandler 是 否 存在 ， 如 果 存 在 ， 则 调用 它 ， 并 将 
错误 对 象 、 发 生 错 误 的 组 件 实例 以 及 一 个 包含 错误 来 源 信息 的 字符 串通 过 参数 的 方式 传递 给 它 ， 
并 且 使 用 try...catch 语句 捕获 错误 。 如 果 全 局 错误 处 理 的 函数 也 发 生 报错 ， 则 在 控制 台 打 印 
其 中 抛 出 的 错误 。 不 论 用 户 是 否 使 用 vue.config.errorHandler 捕获 错误 ，Vue.js 都 会 将 错误 
信息 打印 在 控制 台 。 

接 下 来 实现 第 二 个 功能 : 如 果 一 个 组 件 继承 的 链 路 或 其 父 级 从 属 链 路 中 存在 多 个 errorCaptured 
钩子 函数 ， 则 它们 将 会 被 相同 的 错误 逐个 唤起 。 

在 实现 第 二 个 功能 之 前 ， 我 们 先 调整 一 下 代码 的 架构 : 


91 export function handleError (err, vm, info) { 
02 globalHandleError(err, vm, info) 
e3 } 


65 function globalHandleError (err, vm, info) { 
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66 // 这 里 的 config.errorHandler 就 是 Vue.config.errorHandler 
67 if (config.errorHandler) { 

68 try { 

89 return config.errorHandler.call(null, err, vm, info) 
16 } catch (e) { 

11 logError(e) 

12 

13 } 

14 logError(err) 

15 } 

16 

17 function logError (err) { 

18 console.error(err) 

19 } 


这 里 新 增 了 globalHandleError 函数 ， 并 将 全 局 错误 处 理 相 关 的 代码 放 到 这 个 函数 中 。 
下 面 我 们 实现 第 二 个 功能 : 


861 export function handleError (err, vm, info) { 


82 if (vm) { 

@3 let cur = vm 

84 while ((cur = cur.$parent)) { 

@5 const hooks = cur.$options.errorCaptured 
66 if (hooks) { 

87 for (let i = 6; i < hooks.length; i++) { 
08 hooks[i].call(cur, err, vm, info) 

69 } 

16 } 

11 } 

12 

13 globalHandleError(err, vm, info) 

14 } 

在 上 述 代码 中 ， 我 们 通过 while 语句 自 底 向 上 不 停 地 循环 获取 父 组 件 ， 直 到 根 组 件 。 


在 循环 中 ， 我 们 通过 cur .$options.errorCaptured 属性 读 出 errorCaptured 钩子 函数 列 


表 


> 


遍历 钧 子孙 数列 表 并 依次 执行 列表 中 的 每 一 个 errorCaptured 钩子 函数 。 


也 就 是 说 ， 自 底 向 上 的 每 一 层 都 会 读 出 当前 层 组 件 的 errorCaptured 钩子 函数 列表 ， 并 依 
次 执行 列表 中 的 每 一 个 钩子 函数 。 当 组 件 循环 到 根 组 件 时 ， 从 属 链 路 中 的 多 个 errorCaptured 


钧 子 枉 数 就 都 被 触发 完了 。 此 时 ， 我 们 就 不 难 理解 为 什么 errorCaptured 可 以 捕获 来 自 子孙 组 


件 抛 出 的 错误 了 。 


接 下 来 ， 我 们 实现 第 三 个 功能 : 如 果 errorCaptured 钩子 函数 自身 抛 出 了 一 个 错误 ， 那 么 
这 个 新 错误 和 原本 被 捕获 的 错误 都 会 发 送 给 全 局 的 config.errorHandler。 


实现 这 个 功能 并 不 困难 ， 我 们 只 需 稍微 加 工 一 下 代码 即 可 : 
61 export function handleError (err, vm, info) { 

682 if (vm) { 

@3 let cur = vm 


84 while ((cur = cur.$parent)) { 
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65 const hooks = cur.$options.errorCaptured 
66 if (hooks) { 

67 for (let i = 6; i «< hooks.length; i++) { 
68 try { 

09 hooks[i].call(cur, err, vm, info) 

16 } catch (e) { 

11 globalHandleError(e, cur, "errorCaptured hook') 
12 } 

13 } 

14 } 

15 } 

16 

17 globalHandleError(err, vm, info) 

18 } 


可 以 看 到 ， 只 需要 使 用 try...catch 语句 捕获 钧 子 函数 可 能 发 出 的 错误 ， 并 通过 执行 
globalHandleError 将 捕获 到 的 错误 发 送 给 全 局 错误 处 理 函 数 config.errorHandler 即 可 。 
为 这 个 错误 是 钩子 因 数 自身 抛 出 的 新 错误 , 所 以 不 影响 自 底 向 上 执行 钩子 函数 的 流程 。 而 原 有 的 
错误 则 会 在 自 底 向 上 这 个 循环 结束 后 , 将 错误 传递 给 全 局 错误 处 理 钧 子 函 数 , 就 像 代码 中 所 写 的 
那样 。 

接 下 来 实现 最 后 一 个 功能 : 一 个 errorCaptured 钩子 函数 能 够 返回 false 来 阻止 错误 继续 
向 上 传播 。 它 会 阻止 其 他 被 这 个 错误 唤起 的 errorCaptured 钩子 函数 和 全 局 的 config.error- 


Handler。 


实现 这 个 功能 同样 很 简单 ， 只 需要 稍微 加 工 一 下 代码 即 可 : 


91 export function handleError (err, vm, info) { 


62 if (vm) { 

@3 let cur = vm 

@4 while ((cur = cur.$parent)) { 

@5 const hooks = cur.$options.errorCaptured 

66 if (hooks) { 

67 for (let i = 6;j i «< hooks.length; i++) { 

68 try { 

69 const capture = hooks[i].call(cur，err，vm，info) === false 
16 if (capture) return 

11 } catch (e) { 

12 globalHandleError(e, cur, 'errorCaptured hook') 
13 } 

14 } 

15 } 

16 } 

17 

18 globalHandleError(err, vm, info) 

19 } 


从 代码 中 可 以 看 到 , 改动 并 不 是 很 大 , 但 是 很 巧妙 。 这 里 使 用 capture 保存 多 子 函数 执行 后 
的 返回 值 ， 如 果 返 回 值 false， 则 使 用 return 语句 停止 程序 继续 执行 。 其 巧妙 的 地 方 在 于 代码 
中 的 逻辑 是 先 自 底 向 上 传递 错误 ， 之 后 再 执行 globalHandleError 将 错误 发 送 给 全 局 错误 处 理 
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钧 子 函 数 。 所 以 只 要 在 自 底 向 上 这 个 循环 中 的 某 一 层 执 行 了 return 语句 ， 程 序 就 会 立即 停止 执 
行 ， 从 而 实现 功能 。 因 为 一 旦 钩子 函数 返回 了 false，handleError 函数 将 会 执行 return 语句 
终止 程序 执行 ， 所 以 错误 向 上 传递 和 全 局 的 config.errorHandler 都 会 被 停止 。 


14.4 ”初始 化 实例 属性 


在 Vue.js 的 整个 生命 周期 中 , 初始 化 实例 属性 是 第 一 步 。 需 要 实例 化 的 属性 既 有 Vue.js 内 
部 需要 用 到 的 属性 (例如 13.3.2 节 中 提 到 的 vm._watcher )， 也 有 提供 给 外 部 使 用 的 属性 ( 例如 


vm.$parent )。 


注意 以 $$ 开头 的 属性 是 提供 给 用 户 使 用 的 外 部 属性 ， 以 _ 开头 的 属性 是 提供 给 内 部 使 用 的 内 
部 属性 。 


Vue.js 通过 initLifecycle 函数 向 实例 中 挂 载 属性 ,该 函数 接收 Vue.js 实例 作为 参数 。 所 以 
在 函数 中 , 我们 只 需要 向 Vue.js 实例 设置 属性 即 可 达到 向 Vue.js 实例 挂 载 属性 的 目的 。 代 码 如 下 : 


61 export function initLifecycle (vm) { 


82 const options = vm.$options 

03 

64 // 找 出 第 一 个 非 抽象 父 类 

85 let parent = options.parent 

66 if (parent && !options.abstract) { 
87 while (parent.$options.abstract && parent.$parent) { 
88 parent = parent.$parent 

89 

16 parent.$children.push(vm) 

11 } 

12 

13 vm.$parent = parent 

14 vm.$root = parent ? parent.$root : vm 
15 

16 vm.$children = [] 

17 vm.$refs = {} 

18 

19 vm._watcher = null 

26 vm._isDestroyed = false 

21 vm._isBeingDestroyed = false 

2 二 让 


可 以 看 到 ， 其 逻辑 并 不 复杂 ， 只 是 在 Vuejs 实例 上 设置 一 些 属性 并 提供 一 个 默认 值 。 
稍微 有 点 复杂 的 是 vm.$parent 属性 ， 它 需要 找到 第 一 个 非 抽象 类 型 的 父 级 ， 所 以 代码 中 会 


进行 判断 : 如 果 当 前 组 件 不 是 抽象 组 件 并 且 存 在 父 级 , 那么 需要 通过 while 来 自 底 向 上 循环 ; 如 
果 父 级 是 抽象 类 ， 那么 继续 向 上 ， 直 到 遇 到 第 一 个 非 抽 象 类 的 父 级 时 ， 将 它 赋值 给 vm.$parent 


属性 。 
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另 一 个 值得 注意 的 是 vm.$children 属性 ， 它 会 包含 当前 实例 的 直接 子 组 件 。 该 属性 的 值 是 
从 子 组 件 中 主动 添加 到 父 组 件 中 的 。 上 面 代码 中 的 parent.$children.push(vm) ， 就 是 将 当前 
实例 添加 到 父 组 件 实例 的 $children 属性 中 。 


最 后 一 个 值得 注意 的 属性 是 vm.$root， 它 表示 当前 组 件 树 的 根 Vuejs 实例 。 这 个 属性 的 实 
现 原理 很 巧妙 , 也 很 好 理解 。 如 果 当 前 组 件 没有 父 组 件 , 那么 它 自 己 其 实 就 是 根 组 件 , 它 的 $root 
属性 是 它 自 己 , 而 它 的 子 组 件 的 vm.$root 属性 是 沿用 父 级 的 $root, 所 以 其 直接 子 组 件 的 $root 
属性 还 是 它 ， 其 孙 组 件 的 $root 属性 沿用 其 直接 子 组 件 中 的 $root 属性 ， 以 此 类 推 。 因 此 ,我 
们 会 发 现 这 其 实 是 自 顶 向 下 将 根 组 件 的 $root 依次 传递 给 每 一 个 子 组 件 的 过 程 。 


注意 ”在 真实 的 Vue.js 源码 中 ， 内 部 属性 有 更 多 。 因 为 本 书 介绍 的 内 容 没 有 使 用 那么 多 属性 ， 
所 以 为 了 方便 理解 ， 上 面 代码 中 并 没有 给 出 所 有 属性 


14.5 ”初始 化 事件 


初始 化 事件 是 指 将 父 组 件 在 模板 中 使 用 的 v-on 注册 的 事件 添加 到 子 组 件 的 事件 系统 ( Vuejs 
的 事件 系统 ) 中 。 


我 们 都 知道 ， 在 Vue.js 中 ， 父 组 件 可 以 在 使 用 子 组 件 的 地 方 用 v-on 来 监听 子 组 件 触发 的 事 
件 。 例如 : 


el «<div id="counter-event-example"> 
02 <p>{{ total }}</p> 


63 <button-counter v-on:increment="incrementTotal"></button-counter> 
04 <button-counter v-on:increment="incrementTotal"></button-counter> 
65 </div> 

66 Vue.component('button-counter', { 

67 template: "<button v-on:click="incrementCounter">{{ counter }}</button>', 
68 data: function () { 

69 return { 

16 counter: 6 

11 } 

12 }, 

13 methods: { 

14 incrementCounter: function () { 

15 this.counter += 1 

16 this.$emit('increment') 

17 } 

18 )， 

19， 1) 

20 

21 new Vue({ 

22 el: '#counter-event-example', 

23 data: { 


24 total: 6 
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25 }， 

26 methods: { 

27 incrementTotal: function () { 
28 this.total += 1 


父 组 件 的 模板 里 使 用 v-on 监听 子 组 件 中 触发 的 increment 事件 ， 并 在 子 组 件 中 使 用 this. $emit 
触发 该 事件 。 

你 可 能 会 有 疑问 ， 为 什么 不 使 用 注册 模板 中 的 浏览 器 事件 ? 

对 于 这 个 问题 ， 我 们 需要 先 简单 介绍 一 下 模板 编译 和 虚拟 DOM。 在 模板 编译 阶段 ， 可 以 得 
到 某 个 标签 上 的 所 有 属性 , 其 中 就 包括 使 用 v-on 或 @ 注 册 的 事件 。 在 模板 编译 阶段 , 我 们 会 将 整 
个 模板 编译 成 演 染 函数 , 而 演 染 函数 其 实 就 是 一 些 舱 套 在 一 起 的 创建 元 素 节点 的 函数 。 创建 元 素 
节点 的 函数 是 这 样 的 : _c(tagName, data, children)。 当 泻 染 流 程 启动 时 ， 演 染 函 数 会 被 执行 
并 生成 一 份 VNode， 随 后 虚拟 DOM 会 使 用 VNode 进行 对 比 与 演 染 。 在 这 个 过 程 中 会 创建 一 些 元 
素 , 但 此 时 会 判断 当前 这 个 标签 究竟 是 真 的 标签 还 是 一 个 组 件 : 如 果 是 组 件 标签 ,那么 会 将 子 组 
件 实例 化 并 给 它 传递 一 些 参数 ， 其 中 就 包括 父 组 件 在 模板 中 使 用 v-on 注册 在 子 组 件 标签 上 的 事 
件 ; 如 果 是 平台 标签 ， 则 创建 元 素 并 插入 到 DOM 中 ， 同 时 会 将 标签 上 使 用 v-on 注册 的 事件 注 
册 到 浏览 器 事件 中 。 

简单 来 说 ， 如 果 v-on 写 在 组 件 标 签 上 ， 那 么 这 个 事件 会 注册 到 子 组 件 Vue.js 事件 系统 中 ; 
如 果 是 写 在 平台 标签 上 ,例如 div， 那 么 事件 会 被 注册 到 浏览 器 事件 中 。 

我 们 会 发 现 , 子 组 件 在 初始 化 时 ,也 就 是 初始 化 Vue.js 实例 时 ， 有 可 能 会 接收 父 组 件 向 子 组 
件 注册 的 事件 。 而 子 组 件 自身 在 模板 中 注册 的 事件 ， 只 有 在 泻 染 的 时 候 才 会 根据 虚拟 DOM 的 对 
比 结果 来 确定 是 注册 事件 还 是 解 绑 事 件 。 

所 以 在 实例 初始 化 阶段 ， 被 初始 化 的 事件 指 的 是 父 组 件 在 模板 中 使 用 v-on 监听 子 组 件 内 触 
发 的 事件 。 

如 图 14-2 所 示 ，Vue.js 通过 initEvents 函数 来 执行 初始 化 事件 相关 的 逻辑 ， 其 代码 如 下 : 


61 export function initEvents (vm) { 


62 vm._events = Object.create(null) 

83 // 初始 化 父 组 件 附 加 的 事件 

84 const listeners = vm.$options._ parentListeners 
85 if (listeners) { 

66 updateComponentListeners(vm, listeners) 

67 } 

68 } 


首先 在 vm 上 新 增 _events 属性 并 将 它 初始 化 为 空 对 象 ， 用 来 存储 事件 。 事 实 上 ， 所 有 使 用 
vm.$on 注册 的 事件 监听 器 都 会 保存 到 vm._events 属性 中 。 


在 模板 编译 阶段 ， 当 模板 解析 到 组 件 标 签 时 , 会 实例 化 子 组 件 , 同时 将 标签 上 注册 的 事件 解 


206 第 14 章 生命 周期 


析 成 object 并 通过 参数 传递 给 子 组 件 。 所 以 当 子 组 件 被 实例 化 时 ， 可 以 在 参数 中 获取 父 组 件 向 
自己 注册 的 事件 ， 这 些 事件 最 终 会 被 保存 在 vm.g$options. parentListeners 中 。 


用 前 面 的 例子 中 举例 ，vm.$options. parentListeners 是 下 面 的 样子 : 

el {increment: function () {}} 

通过 前 面 的 代码 可 以 看 到 ， 如 果 vm.$options._parentListeners 不 为 空 ， 则 调用 
updateComponentListeners 方法 ， 将 父 组 件 向 子 组 件 注 册 的 事件 注册 到 子 组 件 实例 中 。 

updateComponentListeners 的 逻辑 很 简单 ， 只 需要 循环 vm. $options._parentListeners 
并 使 用 vm.$on 把 事件 都 注册 到 this._ events 中 即 可 。updateComponentListeners 子 数 的 源 
码 如 下 : 


91 let target 


62 

63 function add (event, fn, once) { 

84 if (once) { 

65 target.$once(event, fn) 

86 } else { 

67 target.$on(event, fn) 

68 

69 } 

16 

11 function remove (event, fn) { 

12 target.$off(event, fn) 

13 } 

14 

15 export function updateComponentListeners (vm, listeners, oldListeners) { 
16 target = vm 

17 updateListeners(listeners, oldListeners || {}, add, remove, vm) 
18 } 


其 中 封装 了 add 和 remove 这 两 个 函数 , 用 来 新 增 和 删除 事件 。 此 外 , 还 通过 updateListeners 
函数 对 比 listeners 和 oldListeners 的 不 同 ， 并 调用 参数 中 提供 的 add 和 remove 进行 相应 的 
注册 事件 和 缉 载 事件 的 操作 。 它 的 实现 思路 并 不 复杂 : 如 果 listeners 对 象 中 存在 某 个 key 
(也 就 是 事件 名 ) 在 oldListeners 中 不 存在 ， 那 么 说 明 这 个 事件 是 需要 新 增 的 事件 ; 反 过 来 ， 
如 果 oldListeners 中 存在 某 些 key (事件 名 ) 在 listeners 中 不 存在 ,那么 说 明 这 个 事件 是 需 
要 从 事件 系统 中 移 除 的 。 


updateListeners 函数 的 实现 如 下 : 


861 export function updateListeners (on，oldon，add，remove，vm) { 


92 let name, cur, old, event 

63 for (name in on) { 

@4 cur = on[name] 

65 old = oldon[name] 

86 event = normalizeEvent(name) 

67 if (isUndef(cur)) { 

08 process.env.NODE_ENV !== 'production' && warn( 


69 “Invalid handler for event "${event.name}": got ”+ String(cur), 
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vm 
) 
} else if (isUndef(old)) { 
if (isUndef(cur.fns)) { 
cur = on[name] = createFnInvoker(cur) 


add(event.name, cur, event.once, event.capture, event.passive) 
} else if (cur !== old) { 
old.fns = cur 
on[name] = old 
} 
} 
for (name in oldon) { 
if (isUndef(on[name])) { 
event = normalizeEvent(name) 
remove(event.name, oldon[name], event.capture) 
} 
} 
} 


该 函数 接收 5 个 参数 ,分 别 是 on、oldon、add、remove 和 vm。 其 主要 逻辑 是 比 对 on 和 oldon 
来 分 辨 哪些 事件 需要 执行 add 注册 事件 ， 哪 些 事 件 需要 执行 remove 删除 事件 。 
上 面 代码 大 致 可 以 分 为 两 部 分 , 第 一 部 分 是 循环 on, 第 二 部 分 是 循环 oldon。 第 一 部 分 的 主 
要 作用 是 判断 哪些 事件 在 oldon 中 不 存在 ， 调 用 add 注册 这 些 事件 。 第 二 部 分 的 作用 是 循环 
oldon， 判 断 哪些 事件 在 on 中 不 存在 ， 调 用 remove 移 除 这 些 事件 。 
在 循环 on 的 过 程 中 ， 有 如 下 三 个 判断 。 


口 判断 事件 名 对 应 的 值 是 否 是 undefined 或 nul1， 如 果 是 ， 则 在 探 


x: 十 二 
注 E33 
/起 、 


口 判断 该 事件 名 在 oldon 中 是 否 存 在 ， 如 果 不 存 在 ， 则 调用 add 注册 事件 。 
口 如 果 事 件 名 在 on 和 oldon 中 都 存在 ， 但 是 它们 并 不 相同 ， 则 将 事件 回调 替换 成 on 中 的 
回调 ， 并 且 把 on 中 的 回调 引用 指向 真实 的 事件 系统 中 注册 的 事件 ， 也 就 是 oldon 中 对 应 
的 事件 。 


代码 中 的 isUndef 函数 用 于 判断 传 入 的 参数 是 否 为 undefined 或 null。 


此 外 ， 代 码 中 还 有 normalizeEvent 函数 ， 它 的 作用 是 什么 呢 ? 


Vuejs 的 模板 中 支持 事件 修饰 符 , 例如 capture、once 和 passive 等 ,如 果 我 们 在 模板 中 注册 
事件 时 使 用 了 事件 修饰 符 , 那么 在 模板 编译 阶段 解析 标签 上 的 属性 时 , 会 将 这 些 修饰 符 改 成 对 应 的 
符号 加 在 事件 名 的 前 面 ， 例 如 <child v-on:increment.once="a"></child>。 此 时 vm. $options. 
_parentListeners 是 下 面 的 样子 : 


61 


可 以 看 到 ， 事 件 名 的 前 面 新 增 了 一 个 ~ 符号 ， 这 说 明 该 事件 的 事件 修饰 符 是 once, 我 们 通 


{~increment: function () {}} 


中 合 触发 警告 。 
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这 样 的 方式 来 分 辨 当前 事件 是 否 使 用 事件 修饰 符 。 而 normalizeEvent 函数 的 作用 是 将 事件 修 
饰 符 解析 出 来 ， 其 代码 如 下 : 


61 const normalizeEvent = name => { 


02 const passive = name.charAt(8) === '&" 
63 name = passive ? name.slice(1) : name 
84 const once = name.charAt(6) === “~ 

65 name = once ? name.slice(1) : name 

66 const capture = name.charAt(8) === "!" 
87 name = capture ? name.slice(1) : name 
68 return { 

69 name， 

16 once, 

人 capture， 

12 passive 

13 } 

14 })) 


可 以 看 到 ,如 果 事 件 有 修饰 符 ， 则 会 将 它 截取 出 来 。 最 终 输 出 的 对 象 中 保存 了 事件 名 以 及 一 
事件 修饰 符 ， 这 些 修饰 符 为 true 说 明 事件 使 用 了 此 事件 修饰 符 。 


Es 


14.6 ”初始 化 inject 


inject 和 provide 通常 是 成 对 出 现 的 ， 我 们 使 用 Vue.js 开发 应 用 时 很 少 用 到 它们 。 这 里 先 
简单 介绍 它们 的 作用 。 


14.6.1 provide/inject 的 使 用 方式 


说 明 provide 和 inject 主要 为 高 阶 插件 /组 件 库 提供 用 例 ， 并 不 推荐 直接 用 于 程序 代码 中 。 


inject 和 provide 选项 需要 一 起 使 用 ， 它 们 允许 祖先 组 件 向 其 所 有 子孙 后 代 注 入 依赖 ， 并 
在 其 上 下 游 关 系 成 立 的 时 间 里 始终 生效 ( 不论 组 件 层次 有 多 深 )。 如 果 你 熟悉 React, 会 发 现 这 与 
它 的 上 下 文 特性 很 相似 。 

provide 选项 应 该 是 一 个 对 象 或 返回 一 个 对 象 的 函数 。 该 对 象 包含 可 注入 其 子孙 的 属性 ， 你 
可 以 使 用 ES2015 Symbol 作为 key, 但 是 这 只 在 原生 支持 Symbol 和 Reflect.ownKeys 的 环境 下 
可 工作 。 


inject 选项 应 该 是 一 个 字符 串 数组 或 对 象 ， 其 中 对 象 的 key 是 本 地 的 绑 定 名 ，value 是 一 
个 key〈 字 符 串 或 symbol ) 或 对 象 ， 用 来 在 可 用 的 注入 内 容 中 搜索 。 


如 果 是 对 象 ， 那么 它 有 如 下 两 个 属性 。 


口 name: 它 是 在 可 用 的 注入 内 容 中 用 来 搜索 的 key ( 字符 串 或 Symbo1 ) 。 
口 default: 它 是 在 降级 情况 下 使 用 的 value。 
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说 明 可 用 的 注入 内 容 指 的 是 祖先 组 件 通 过 provide 注入 了 内 容 ， 子 孙 组 件 可 以 通过 inject 
获取 祖先 组 件 注入 的 内 容 。 


示例 如 下 : 

61 var Provider = { 
02 provide: { 

@3 foo: 'bar' 

64 }， 

65 /1 

66 } 

87 

68 var Child = { 

89 inject: ['foo'], 
16 created () { 

11 console.log(this.fo0o) // => "bar" 
12 } 

13 /fe 

14 } 


如 果 使 用 ES2015 Symbol 作为 key， 则 provide 函数 和 inject 对 象 如 下 所 示 : 


61 const s = Symbol() 


62 

@3 const Provider = { 
84 provide () { 
65 return { 

66 [s]: “foo' 
67 } 

68 } 

69 } 

16 

11 const Child = { 
12 inject: { s }, 
13 /fe 

14 } 


并 且 可 以 在 data/props 中 访问 注入 的 值 。 例 如 ,使 用 一 个 注入 的 值 作为 props 的 默认 值 : 


61 const Child = { 


02 inject: ['foo'], 

0@3 props: { 

84 bar: { 

685 default () { 

66 return this.foo 
67 } 

68 } 

69 } 

10 } 


或 者 使 用 一 个 注入 的 值 作为 数据 入 口 : 
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81 const Child = { 


02 inject: ['foo'], 
03 data () { 

04 Peturn { 

65 bar: this.foo 
66 } 

67 } 

68 } 


在 Vue.js 2.5.0+ 版 本 中 ， 可 以 通过 设置 inject 的 默认 值 使 其 变 成 可 选项 : 


81 const Child = { 


62 inject: { 

63 foo: { default: 
64 } 

e5 } 


'foo' } 


如 果 它 需要 从 一 个 不 同名 字 的 属性 注入 ， 则 使 用 from 来 表示 其 源 属性 : 


@1 const Child = { 


82 inject: { 

63 foo: { 

04 from: "bar', 
65 default: 'foo' 
66 } 

67 } 

68 } 


上 面 代码 表示 祖先 组 件 注入 的 名 字 是 bar, 子 组 件 将 内 容 注 入 到 foo 中 , 在 子 组 件 中 可 以 通 


过 this .foo 来 访问 内 容 。 


计 


inject 的 默认 值 与 props 的 默认 值 类 似 ， 我 们 需要 对 非 原 始 值 使 用 一 个 工厂 方法 : 


81 const Child = { 


62 inject: { 

03 foo: { 

04 from: "bar', 

65 default: () => [1，2，3] 
86 

67 } 

68 } 


14.6.2 inject 的 内 部 原理 


我 相信 你 现在 已 经 大 概 了 
部 实现 原理 。 


解 了 inject 和 provide 的 作用 ， 接 下 来 将 详细 介绍 inject 的 内 


虽然 inject 和 provide 是 成 对 出 现 的 ,但 是 二 者 在 内 部 的 实现 是 分 开 处 理 的 , 先 处 理 inject 


后 处 理 provide。 从 图 14-2 中 也 可 以 看 出 ，inject 在 data/props 之 前 初始 化 ， 而 provide 在 
data/props 后 面 初始 化 。 这 样 做 的 目的 是 让 用 户 可 以 在 data/props 中 使 用 inject 所 注入 的 内 
容 。 也 就 是 说 ,可 以 让 data/props 依赖 inject, 所 以 需要 将 初始 化 inject 放 在 初始 化 data/props 


的 前 面 。 
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通过 前 面 的 介绍 我 们 得 知 , 通 过 provide 注入 的 内 容 可 以 被 所 有 子孙 组 件 通过 inject 得 到 。 

很 明显 , 初始 化 inject, 就 是 使 用 inject 配置 的 key 从 当前 组 件 读 取 内 容 , 读 不 到 则 读 取 它 
的 父 组 件 ， 以 此 类 推 。 它 是 一 个 自 底 向 上 获取 内 容 的 过 程 ， 最 终 将 找到 的 内 容 保存 到 实例 (this ) 
中 ， 这 样 就 可 以 直接 在 this 上 读 取 通过 inject 导入 的 注入 内 容 。 

从 图 14-2 中 可 以 看 出 初始 化 inject 的 方法 叫 作 initInjections， 其 代码 如 下 : 


61 export function initInjections (vm) { 


62 const result = resolveInject(vm.$options.inject, vm) 
63 if (result) { 

64 observerState. shouldConvert = false 

85 Object.keys(result).forEach(key => { 

66 defineReactive(vm, key, result[key]) 

87 }) 

08 observerState. shouldConvert = true 

69 } 

10 } 


其 中 ，resolveInject 函数 的 作用 是 通过 用 户 配置 的 inject， 自 底 向 上 搜索 可 用 的 注入 内 容 ， 
并 将 搜索 结果 返回 。 上 面 的 代码 将 注入 结果 保存 到 result 变量 中 。 

接 下 来 ,循环 result 并 依次 调用 defineReactive 函数 (该 函数 在 第 2 章 中 介绍 过 ) 将 它 
们 设置 到 Vue.js 实例 上 。 

代码 中 有 一 个 细节 需要 注意 ， 在 循环 注入 内 容 前 ， 有 一 行 代码 是 : 

061 observerState.shouldConvert = false 

在 循环 结束 后 ， 有 一 行 代码 是 : 

61 observerstate.shouldConvert = true 
其 作用 是 通知 defineReactive 函数 不 要 将 内 容 转换 成 响应 式 。 其 原理 也 很 简单 ， 在 将 值 转换 成 
响应 式 之 前 ， 判 断 observerSstate.shouldConvert 属性 即 可 ， 这 里 不 再 详细 介绍 。 


接 下 来 ， 我 们 主要 看 resolveInject 的 实现 原理 ， 它 是 如 何 自 底 向 上 搜索 可 用 的 注入 内 容 
的 呢 ? 

事实 上 ， 实 现 这 个 功能 的 主要 思想 是 : 读 出 用 户 在 当前 组 件 中 设置 的 inject 的 key， 然 后 
循环 key， 将 每 一 个 key 从 当前 组 件 起 , 不 断 向 父 组 件 查 找 是 否 有 值 ， 找 到 了 就 停止 循环 ， 最终 
将 所 有 key 对 应 的 值 一 起 返回 即 可 。 

按照 上 面 的 思想 ，resolveInject 函数 最 初 的 代码 是 下 面 这 样 的 : 


61 export function resolveInject (inject, vm) { 


62 if (inject) { 

83 const result = Object.create(null) 
64 // 做 些 什么 

65 return result 

06 } 


e7 } 
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第 一 步 要 做 的 事情 是 获取 inject 的 key。provide/inject 可 以 支持 Symbol1， 但 它 只 在 原 
生 文 持 Symbol 和 Reflect.ownKeys 的 环境 下 才 可 以 工作 ， 所 以 获取 key 需要 考虑 到 Symbol 的 


情况 ， 此 时 代码 如 下 : 


@1 export function resolveInject (inject, vm) { 


02 if (inject) { 

03 const result = 0bJject.create(nul1) 

84 const keys = hasSymbol 

65 ? Reflect.ownKeys(inject).filter(key => { 

66 return Object.getOwnPropertyDescriptor(inject, key).enumerable 
07 }) 

68 : Object.kKkeys(inject) 

69 return result 

16 } 

11 } 


如 果 浏 览 器 原生 支持 symbol1， 那 么 使 用 Reflect.ownKeys 读 取 出 inject 的 所 有 key; 如 
果 浏 览 器 原生 不 支持 symbol， 那么 使 用 0bject.keys 获取 key。 其 区 别 是 Reflect.ownKeys 可 


以 读 取 Symbol 类 型 的 
包括 不 可 枚 举 的 属性 ， 


FE 二 


时 性 ,而 0bject.keys 读 不 出 来 。 由 于 通过 Reflect.ownKeys 读 出 的 key 
所 以 代码 中 需要 使 用 filter 将 不 可 枚 举 的 属性 过 滤 掉 。 


Reflect.ownKeys 有 一 个 特点 , 它 可 以 返回 所 有 自 有 属性 的 键 名 , 其 中 字符 串 类 型 和 Symbol 
类 型 都 包含 在 内 。 而 0bject.getownPropertyNames 和 0bject.keys 返回 的 结果 不 会 包含 symbol 
3 


类 型 的 属性 名 ，0bjec 


t.getOwnPropertySymbols 方法 又 只 返回 Symbol 类 型 的 属性 。 


所 以 ， 如 果 浏 览 器 原生 支持 Symbol， 那 么 Reflect.ownKeys 是 比较 符合 我 们 目标 的 一 个 


API。 它 的 返回 值 会 包 
的 属性 过 滤 掉 。 


自身 可 枚 举 的 全 部 属 怕 


含 所 有 类 型 的 属性 名 ， 我 们 唯一 需要 做 的 事 就 是 使 用 filter 将 不 可 枚 举 


如 果 浏览 右 元 素 不 支持 symbol， 那么 0bject.keys 是 比较 符合 目标 的 API， 因 为 它 仅 返 回 


FE 名 ， 而 0bject .getOwnPropertyNames 会 把 不 可 枚 举 的 属性 名 也 返回 。 


得 到 了 用 户 设置 的 inject 的 所 有 属性 名 之 后 ， 就 可 以 循环 这 些 属性 名 ， 自 底 向 上 搜索 值 。 


这 可 以 使 用 while 循环 实现 ， 其 代码 如 下 : 


@1 export function resolveInject (inject, vm) { 


02 if (inject) { 

03 const result = Object.create(null) 

64 const keys = hasSymbol 

65 ? Reflect.ownKeys(inject).filter(key => { 
86 return Object.getOwnpPropertyDescriptor(inject, key).enumerable 
87 }) 

68 : Object.keys(inject) 

89 

16 for (let i = 6; i < keys.length; i++) { 

11 const key = keys[i] 

12 const providekey = inject[key].from 

13 let source = vm 


14 while (source) { 
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15 if (Source._provided && provideKey in source._provided) { 
16 result[key] = source._provided[provideKey] 

17 break 

18 } 

19 source = source.$parent 

26 } 

2 } 

22 return result 

23 } 

24 } 


在 上 述 代码 中 ,最 外 层 使 用 for 循环 key, 在 循环 体内 可 以 依次 得 到 每 一 次 key 值 ， 并 通过 
from 属性 得 到 provide 源 属性 。 然 后 通过 源 属 性 使 用 while 循环 来 搜索 内 容 。 最 开始 source 
等 于 当前 组 件 实 例 ， 如 果 原 始 属 性 在 source 的 _provided 中 能 找到 对 应 的 值 ， 那么 将 其 设置 到 
result 中 , 并 使 用 break 跳出 循环 。 否则 , 将 source 设置 为 父 组 件 实例 进行 下 一 轮 循环 , 以 此 
类 推 。 


注意 ” 当 使 用 provide 注入 内 容 时 ， 其 实 是 将 内 容 注入 到 当前 组 件 实例 的 _provide 中 ， 所 以 
inject 可 以 从 父 组 件 实例 的 _provide 中 获取 注入 的 内 容 。 
通过 这 样 的 方式 ， 最 终 会 在 祖先 组 件 中 搜索 到 inject 中 设置 的 所 有 属性 的 内 容 。 


细心 的 同学 会 发 现 ，inject 其 实 还 支持 数组 的 形式 ， 如 果 用 户 将 inject 的 值 设置 为 数组 ， 
那么 inject 中 是 没有 from 属性 的 ， 此 时 这 个 逻辑 是 不 是 有 问题 ? 

其 实 是 没 问题 的 ， 因 为 当 Vue.js 被 实例 化 时 ， 会 在 上 下 文 (this ) 中 添加 $options 属性 ， 
这 会 把 用 户 提 供 的 数据 规格 化 ， 其 中 就 包括 inject。 
由 就 是 说 ，Vuejjs 在 实例 化 的 第 一 步 是 规格 化 用 户 传 入 的 数据 ， 如 果 inject 传递 的 内 容 是 
数组 ， 那 么 数组 会 被 规格 化 成 对 象 并 存放 在 from 属性 中 。 

例如 ， 用 户 设置 的 inject 是 这 样 的 : 


61 { 

02 inject: [foo] 
63 } 

它 被 规格 化 之 后 是 下 面 这 样 的 : 
61 { 

62 inject: { 

83 foo: { 

84 from: “foo 
65 } 

66 } 

67 } 


不 论 是 数组 形式 还 是 对 象 中 使 用 from 属性 的 形式 ， 本 质 上 其 实 是 让 用 户 设置 原 属性 名 与 当 
前 组 件 中 的 属性 名 。 如 果 用 户 设置 的 是 数组 ， 那 么 就 认为 用 户 是 让 两 个 属性 名 保持 一 致 。 


214 第 14 章 生命 周期 


现在 , 我 们 就 可 以 搜索 所 有 祖先 组 件 注入 的 内 容 了 。 但 是 通过 前 面 的 介绍 , 我 们 知道 inject 
是 支持 默认 值 的 。 也 就 是 说 , 在 所 有 祖先 组 件 实例 中 都 搜索 不 0 如 果 用 户 设置 了 默 
认 值 ， 那 么 将 使 用 默认 值 。 

要 实现 这 个 功能 ， 我 们 只 需要 在 while 循环 结束 时 ， 判 断 source 是 否 为 false， 相 关 代 码 
如 下 : 


@1 export function resolveInject (inject, vm) { 


02 if (inject) { 

63 const result = Object.create(null) 

84 const keys = hasSymbol 

65 ? Reflect.ownKeys(inject).filter(key => { 

86 return Object.getOwnPropertyDescriptor(inject, key).enumerable 
67 }) 

68 : Object.keys(inject) 

89 

16 for (let i = 6;j i < keys.length; i++) { 

11 const key = keys[i] 

12 const providekey = inject[key].from 

13 let source = vm 

14 while (source) { 

15 if (source. provided && providekey in source. provided) { 
16 result[key] = source. provided[provideKey] 

17 break 

18 } 

19 source = source.$parent 

26 } 

2 if (!source) { 

22 if ('default' in inject[key]) { 

23 const provideDefault = inject[key].default 

24 result[key] = typeof provideDefault === 'function"' 
25 ? provideDefault.call(vm) 

26 : provideDefault 

27 } else if (process.env.NODE_ENV !== 'production') { 
28 warn( Injection "${key}" not found- , vm) 

29 } 

36 } 

31 } 

32 return result 

33 } 

34 } 


上 面 代码 新 增 了 默认 值 相关 的 逻辑 ， 如 果 !source 为 true， 那 么 判断 inject[key] 中 是 否 
存在 default 属性 。 如 果 存 在 ， 则 当前 key 的 结果 是 默认 值 。 这 里 有 一 个 细节 需要 注意 ， 那 就 
是 默认 值 支持 函数 ,所 以 需要 判断 默认 值 的 类 型 是 不 是 函数 , 是 则 执行 函数 , 将 函数 的 返回 值 设 
置 给 result[key]。 


如 果 inject[key] 中 不 存在 default 属性 ， 那 么 会 在 非 生 产 环境 下 的 控制 台中 打印 警告 。 
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14.7 ”初始 化 状态 
当 我 们 使 用 Vuejs 开发 应 用 时 ， 经 常会 使 用 一 些 状态 


和 watch。 在 Vuejs 内 部 ， 这 些 状态 在 使 用 之 前 需要 进 和 


态 的 内 部 原理 。 


， 例 如 props 、methods 、data 、computed 
行 初始 化 。 本 节 将 详细 介绍 初始 化 这 些 状 


通过 本 节 的 学 习 , 我 们 将 理解 什么 是 props, 为 什么 methods 中 的 方法 可 以 通过 this 访问 ， 


data 在 Vue.js 内 部 是 什么 样 的 ，computed 是 如 何 工 作 的 ， 以 及 watch ee 


initstate 函数 的 代码 如 下 : 


61 export function initState (vm) { 


02 vm._watchers = [] 

83 const opts = vm.$options 

84 if (opts.props) initProps(vm，opts.props) 
85 if (opts.methods) initMethods(vm，opts .me 
66 if (opts.data) { 

87 initData(vm) 

88 } else { 

69 observe(vm._ data = {}, true /* asRootDa 
16 } 

11 if (opts.computed) initComputed(vm, opts. 
12 if (opts.watch && opts.watch !== nativeWa 
13 initWatch(vm, opts.watch) 

14 } 

15 } 


thods) 


ta */) 


computed) 
tch) { 


在 上 面 的 代码 中 , 首先 在 vm 上 新 增 一 个 属性 _watchers， 用 来 保存 当前 组 件 中 所 有 的 watcher 


实例 。 无 论 是 使 用 vm.$watch 注册 的 watcher 实例 还 
都 会 添加 到 vm._watchers 中 。 


不 是 使 用 watch 选项 添加 的 watcher 实例 ， 


在 13.3.2 节 介 绍 过 ， 可 以 通过 vm._watchers 得 到 当前 Vue.js 实例 中 所 注册 的 所 有 watcher 


实例 ， 并 将 它们 依次 代 载 。 


接 下 来 要 做 的 事情 很 简单 ， 先 判断 vm. $options 
用 initProps 初始 化 props。 


然后 判断 vm.$options 中 是 否 存在 methods 属性 


中 是 否 存 在 props 属性 ， 如 果 存 在 ， 则 调 


E， 如 果 存 在 ， 则 调用 initMethods 初始 化 


methods。 接 着 判断 vm.$options 中 是 否 存 在 data 属性 : 如 果 存 在 ， 则 调用 initData 初始 化 
data; 如 果 不 存在 ， 则 直接 使 用 observe 函数 观察 空 对 象 。 


说 明 在 3.7 节 中 介绍 过 ，observe 函数 的 作用 是 将 数据 转换 为 响应 式 的 。 


data 初始 化 之 后 ， 会 判断 vm.$options 中 是 否 存在 computed 属性 ， 如 果 存 在 ， 则 调用 


initComputed 初始 化 computed。 最 后 判断 vm. $opti 
则 调用 initwatch 初始 化 watch。 


ions 中 是 否 存 在 watch 属性 ， 如 果 存 在 


216 第 14 章 ”生命 周期 


用 户 在 实例 化 Vue.js 时 使 用 了 哪些 状态 ,哪些 状态 就 需要 被 初始 化 , 没有 用 到 的 状态 则 不 用 
初始 人 化。 例如， 用户 只 使 用 了 data， 那么 只 需要 初始 化 data 即 可 。 

如 果 你 足够 细心 ， 就 会 发 现 初始 化 的 顺序 其 实 是 精心 安排 的 。 先 初始 化 props ， 后 初始 化 
data， 这 样 就 可 以 在 data 中 使 用 props 中 的 数据 了 。 在 watch 中 既 可 以 观察 props， 也 可 以 观 
察 data， 因 为 它 是 最 后 被 初始 化 的 。 

14-3 给 出 了 初始 化 状态 的 结构 图 。 初 始 化 状态 可 以 分 为 5 个 子 项 ,分 别 是 初始 化 props、 
初始 化 methods、 初 始 化 data、 初 始 化 computed 和 初始 化 watch， 下 面 我 们 将 分 别针 对 这 5 个 
子 项 进行 详细 介绍 。 


initState 


initProps initMethods initData initComputed initWatch 


图 14-3 ”初始 化 状态 


14.7.1 初始 化 props 


我 相信 大 家 对 于 props 的 使 用 方式 已 经 非常 熟悉 ， 这 里 直接 介绍 其 实现 原理 。 

props 的 实现 原理 大 体 上 是 这 样 的 : 父 组 件 提供 数据 , 子 组 件 通过 props 字段 选择 自己 需要 哪 
些 内 容 ,Vue.js 内 部 通过 子 组 件 的 props 选项 将 需要 的 数据 筛选 出 来 之 后 添加 到 子 组 件 的 上 下 文中 。 

为 了 更 清晰 地 理解 props 的 原理 ， 我 们 简单 介绍 Vue.js 组 件 系统 的 运作 原理 。 

事实 上 ，Vue.js 中 的 所 有 组 件 都 是 Vue.js 实例 ， 组 件 在 进行 模板 解析 时 ， 会 将 标签 上 的 属性 
解析 成 数据 ， 最 终生 成 泻 染 函数 。 而 泻 染 函数 被 执行 时 ,会 生成 真实 的 DOM 节点 并 泻 染 到 视图 
中 。 但 是 这 里 面 有 一 个 细节 ， 如 果 某 个 节点 是 组 件 节点 ， 也 就 是 说 模板 中 的 、 某 个 标签 的 名 字 是 
组 件 名 ,那么 在 虚拟 DOM 泻 染 的 过 程 中 会 将 子 组 件 实例 化 ， 这 会 将 模板 解析 时 从 标签 属性 上 解 
析出 的 数据 当 作 参 数 传递 给 子 组 件 ， 其 中 就 包含 props 数据 。 

1. 规格 化 props 

子 组 件 被 实例 化 时 ， 会 先 对 props 进行 规格 化 处 理 ， 规 格 化 之 后 的 props 为 对 象 的 格式 。 


说 明 props 可 以 通过 数组 指定 需要 哪些 属性 。 但 在 Vue.js 内 部 ， 数 组 格式 的 props 将 被 规格 
化 成 对 象 格式 。 
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规格 化 props 的 实现 代码 如 下 : 


61 function normalizeProps (options, vm) { 


82 const props = options.props 

@3 if (!props) return 

84 const res = {} 

85 let i, val, name 

66 if (Array.isArray(props)) { 

87 i = props.length 

88 while (i--) { 

69 val = props[i] 

16 if (typeof val === 'string') { 

1 name = camelize(val) 

12 res[name] = { type: null } 

13 } else if (process.env.NODE_ENV !== 'production') { 
14 warn('props must be strings when using array syntax.') 
15 } 

16 

17 } else if (isplainObject(props)) { 

18 for (const key in props) { 

19 val = props[key] 

26 name = camelize(key) 

21 res[name] = isplainObject(val) 

22 ? val 

23 : { type: val } 

24 

25 } else if (process.env.NODE_ENV !== 'production') { 
26 warn( 

27 “ Invalid value for option "props": expected an Array or an Object, ~ + 
28 “but got ${toRawType(props)}..，, 

29 vm 

36 ) 

31 } 

32 options.props = res 

33 } 


在 上 述 代码 中 ， 首 先 判 断 是 否 有 props 属性 ， 如 果 没 有 ， 说 明 用 户 没有 使 用 props 接收 任 
何 数据 ， 那 么 不 需要 规格 化 ， 直 接 使 用 return 语句 退出 即 可 。 然 后 声明 了 一 个 变量 res， 用 来 
保存 规格 化 后 的 结果 。 


随后 是 规格 化 props 的 主要 逻辑 。 先 检查 props 是 否 为 一 个 数组 。 如 果 不 是 ， 则 调用 
isPlain0bject 函数 检查 它 是 否 为 对 象 类 型 ， 如果 都 不 是 , 那么 在 非 生 产 环境 下 在 控制 台中 打印 
警告 。 如 果 props 是 数组 ， 那 么 通过 while 语句 循环 数组 中 的 每 一 项 ， 判 断 props 名 称 的 类 型 
是 否 是 string 类 型 : 如 果 不 是 ， 则 在 非 生产 环境 下 在 控制 台中 打印 警告 ， 如果 是 ， 则 调用 
camelize 函数 将 props 名 称 驼峰 化 ， 即 可 以 将 a-b 这 样 的 名 称 转换 成 aB。 


也 就 是 说 ， 如 果 在 父 组 件 的 模板 中 使 用 这 样 的 语法 : 


01 <child user-name="berwin"></child> 


那么 在 子 组 件 中 的 props 选项 中 需要 使 用 userName: 
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61 { 
02 props: [ "userName '] 
63 } 


而 使 用 user-name 是 不 行 的 。 例 如 ， 下 面 这 样 设置 props 选项 是 无 法 得 到 props 数据 的 : 
861 // 错误 用 法 


62 { 
63 props: [ "user-name ] 
084 } 


随后 将 props 名 当 作 属性 ， 设 置 到 res 中 ， 值 为 { type: null }: 


61 if (Array.isArray(props)) { 


02 i = props.length 

63 while (i--) { 

@4 val = props[i] 

65 if (typeof val === 'string') { 

66 name = camelize(val) 

67 res[name] = { type: null } 

68 } else if (process.env.NODE_ENV !== 'production') { 
69 warn( "props must be strings when using array syntax.') 
16 } 

11 } 

12 } 


总 结 一 下 ， 上 面 做 的 事情 就 是 将 Array 类 型 的 props 规格 化 成 0bject 类 型 。 


如 果 props 的 类 型 不 是 Array 而 是 object， 那 么 根据 props 的 语法 可 以 得 知 ，props 对 象 
中 的 值 可 以 是 一 个 基础 的 类 型 函数 ， 例 如 : 


61 1{ 

02 propA: Number 

63 } 

也 有 可 能 是 一 个 数组 ， 提 供 多 个 可 能 的 类 型 ， 例 如 : 
61 1{ 

02 propB: [String，Number] 

63 } 

还 可 能 是 一 个 对 象 类 型 的 高 级 选项 ， 例 如 : 
61 1{ 

62 propC: { 

93 type: String, 

@4 required: true 

65 } 

66 } 


所 以 代码 中 的 逻辑 是 使 用 for . . .in 语句 循环 props。 

在 循环 中 得 到 key 与 val 之 后 ， 判 断 val 的 类 型 是 否 是 0bject: 如 果 是 ， 则 在 res 上 设置 
key 为 名 的 属性 ， 值 为 val; 如 果 不 是 ,那么 说 明 val 的 值 可 能 是 基础 的 类 型 函数 或 者 是 一 个 数 
组 提供 多 个 可 能 的 类 型 。 那 么 在 res 上 设置 key 为 名 、 值 为 { type: val } 的 属性 ， 代 码 如 下 : 
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61 if (isplainObject(props)) { 


02 for (const key in props) { 

83 val = props[key] 

84 name = camelize(key) 

85 res[name] = isplainObject(val) 
66 ? Val 

87 : { type: val } 

68 } 

69 } 


也 就 是 说 , 规格 化 之 后 的 props 的 类 型 既 有 可 能 是 基础 的 类 型 函数 , 也 有 可 能 是 数组 。 这 在 
后 面 断 言 props 是 否 有 效 时 会 用 到 。 

2 .初始 化 props 

正如 前 面 我 们 介绍 的 ， 初 始 化 props 的 内 部 原理 是 : 通过 规格 化 之 后 的 props 从 其 父 组 件 
传人 的 props 数据 中 或 从 使 用 new 创建 实例 时 传人 的 propsData 参数 中 ， 筛 选 出 需要 的 数据 保 
存在 vm._props 中 ， 然 后 在 vm 上 设置 一 个 代理 ， 实 现 通过 vm.x 访问 vm._props.x 的 目的 。 

如 图 14-3 所 示 ， 初 始 化 props 的 方法 叫 作 initProps ， 其 代码 如 下 : 


61 function initProps (vm, propsOptions) { 


62 const propsData = vm.$options.propsData || {} 
83 const props = vm._props = {} 

64 // 缓存 props 的 key 

85 const keys = vm.$options. propKeys = [] 

86 const isRoot = !vm.$parent 

07 // root 实例 的 props 属性 应 该 被 转换 成 响应 式 数据 
88 if (!isRoot) { 

89 toggleObserving(false) 

16 } 

11 for (const key in propsOptions) { 

12 keys.push(key) 

13 const value = validatepProp(key, propsOptions, propsData, vm) 
14 defineReactive(props, key, value) 

15 if (!(key in vm)) { 

16 proxy(vm, `_props’, key) 

17 

18 

19 toggleObserving(true) 

20 


initProps 函数 接收 两 个 参数 : vm 和 propsoptions， 前 者 是 Vue.js 实例 ， 后 者 是 规格 化 之 
后 的 props 选项 。 4 


随后 在 函数 中 声明 了 4 个 变量 propsData、props、keys 和 isRoot。 变 量 propsData 中 保 
存 的 是 通过 父 组 件 传人 或 用 户 通过 propsData 传人 的 真实 props 数据 。 变 量 props 是 指向 
vm._props 的 指针 ， 也 就 是 所 有 设置 到 props 变量 中 的 属性 最 终 都 会 保存 到 vm._props 中 。 变 
量 keys 是 指向 vm. $options._propKeys 的 指针 , 其 作用 是 缓存 props 对 象 中 的 key, 将 来 更 新 
props 时 只 需要 遍历 vm.$options. propKeys 数组 即 可 得 到 所 有 props 的 key。 变量 isRoot 的 
作用 是 判断 当前 组 件 是 否 是 根 组 件 。 
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接 下 来 , 会 判断 当前 组 件 是 否 是 根 组 件 ， 如 果 不 是 , 那么 不 需要 将 props 数据 转换 成 啊 应 式 
数据 。 

这 里 toggleObserving 函数 的 作用 是 确定 并 控制 defineReactive 函数 调用 时 所 传人 的 
value 参数 是 否 需 要 转换 成 响应 式 的 。toggle0bserving 是 一 个 闭 包 函 数 , 所 以 能 通过 调用 它 并 
传人 一 个 参数 来 控制 observer/index.js 文件 的 作用 域 中 的 变量 shouldobserve。 这 样 当 数 据 将 要 
被 转换 成 响应 式 时 ， 可 以 通过 变量 shouldobserve 来 判断 是 否 需 要 将 数据 转换 成 响应 式 的 。 

然后 循环 propsoptions, 在 循环 体 中 先 将 key 添加 到 keys 中 , 然后 调用 validateProp 函 
数 将 得 到 的 props 数据 通过 defineReactive 函数 设置 到 vm._props 中 。 

最 后 判断 这 个 key 在 vm 中 是 否 存在 ， 如 果 不 存 在 ， 则 调用 proxy, 在 vm 上 设置 一 个 以 key 
为 属性 的 代理 ， 当 使 用 vm[key] 访问 数据 时 ， 其 实 访问 的 是 vm._props[key]。 

关于 proxy 函数 ， 我 们 会 在 14.7.3 节 中 介绍 它 的 内 部 原理 。 

这 里 的 重点 是 validateProp 函数 是 如 何 获取 props 内 容 的 。validateProp 的 代码 如 下 : 


@1 export function validateProp (key, propOptions, propsData, vm) { 


82 const prop = propOptions[key] 

03 const absent = !hasOwn(propsData, key) 

064 let value = propsData[key] 

65 // 处 理 布尔 类 型 的 props 

66 if (isType(Boolean，prop.type)) { 

67 if (absent && !hasown(prop， 'default')) { 

68 value = false 

69 } else if (!isType(String，prop.type) && (value === '' || value === hyphenate(key))) { 
16 value = true 

11 } 

12 } 

13 // 检查 默认 值 

14 if (value === undefined) { 

15 value = getPropDefaultValue(vm, prop, key) 

16 // 因为 默认 值 是 新 的 数据 ， 所 以 需要 将 它 转换 成 响应 式 的 
17 const prevShouldConvert = observerState.shouldConvert 
18 observerstate.shouldConvert = true 

19 observe(value) 

26 observerState. shouldConvert = prevShouldConvert 
21 } 

22 if (process.env.NODE_ENV !== 'production') { 

23 assertProp(prop，key，value，vm，absent) 

24 } 

25 return value 

26 } 


validateProp 函数 接收 如 下 4 个 参数 。 

口 key: propoptions 中 的 属性 名 。 

口 propoptions: 子 组 件 用 户 设置 的 props 选项 。 
D propsData: 父 组 件 或 用 户 提 供 的 props 数据 。 
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口 vm: Vuejs 实例 上 下 文 ，this 的 别名 。 


函数 中 先 声 明 3 个 变量 prop、absent 和 value。 变 量 prop 保存 的 内 容 是 当前 这 个 key 的 
prop 选项 。 变 量 absent 表示 当前 的 key 在 用 户 提供 的 props 选项 中 是 否 存 在 。 变 量 value 表 
示 使 用 当前 这 个 key 在 用 户 提供 的 props 选项 中 获取 的 数据 。 也 就 是 说 , 这 3 个 变量 分 别 保存 当 
前 这 个 key 的 prop 选项 、prop 数据 以 及 一 个 布尔 值 (用 来 判断 prop 数据 是 否 存 在 )。 事 实 上 ， 
变量 value 中 可 能 存在 正确 的 值 ， 也 有 可 能 不 存在 。 气 数 的 剩余 代码 主要 解决 特殊 情况 。 

首先 ， 解决 布尔 类 型 prop 的 特殊 情况 。 

先 使 用 isType 方法 判断 prop 的 type 属性 是 否 是 布尔 值 ， 如 果 是 ,那么 开始 处 理 布尔 值 类 
型 的 prop 数据 。 布 尔 值 的 特殊 情况 比 其 他 类 型 多 ， 其 他 类 型 的 prop 在 value 有 数据 时 ， 不 需 
要 进行 特殊 处 理 ， 只 有 在 没有 数据 的 时 候 检 查 默认 值 即 可 ， 而 布尔 值 类 型 的 prop 有 两 种 额外 的 
场景 需要 处 理 。 

一 种 情况 是 key 不 存在 ， 也 就 是 说 父 组 件 或 用 户 并 没有 提供 这 个 数据 ， 并 且 props 选项 中 
也 没有 设置 默认 值 ,那么 这 时 候 需 要 将 value 设置 成 false。 另 一 种 情况 是 key 存在 , 但 value 
是 空 字 符 串 或 者 value 和 key 相等 。 


注意 这 里 的 value 和 key 相等 除了 常见 的 a="a" 这 种 方式 的 相等 外 ,还 包含 userName="user- 
name" 这 种 方式 。 


也 就 是 说 ， 在 下 面 这 些 使 用 方式 下 ， 子 组 件 的 prop 都 将 设置 为 true: 


91 《child name></child> 
63 <child name="name"></child> 


85 <child userName="user-name"></child> 


解决 布尔 类 型 prop 的 特殊 情况 的 代码 如 下 : 


61 if (isType(Boolean, prop.type)) { 
62 if (absent && !hasown(prop， 'default')) { 


63 value = false 

64 } else if (1isType(String，prop.type) && (value === '' || value === hyphenate(key))) { 
85 value = true 

686 四 

67 } 


这 里 的 hyphenate 函数 会 将 key 进行 驼峰 转换 ， 也 就 是 说 userName 转换 完 之 后 是 user-name， 
所 以 属性 为 userName 的 值 如 果 是 user-name， 那 么 也 会 将 value 设置 为 true。 

所 以 当 子 组 件 props 选项 中 的 userName 属性 为 布尔 类 型 时 ,其 实 下 面 这 种 情况 也 会 将 value 
设置 为 七 Pue : 


91 <child user-name="user-name"></child> 
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除了 布尔 值 需要 特殊 处 理 之 外 ， 其 他 类 型 的 prop 只 需要 处 理 一 种 情况 ， 并 不 需要 进行 额外 
的 特殊 处 理 。 那 就 是 如 果子 组 件 通过 props 选项 设置 的 key 在 props 数据 中 并 不 存在 ,这 时 props 
选项 中 如 果 提 供 了 默认 值 ， 则 需要 使 用 它 ， 并 将 默认 值 转换 成 响应 式 数据 。 代 码 如 下 : 


61 if (value === undefined) { 

02 value = getPropDefaultValue(vm, prop, key) 

63 // 因为 默认 值 是 新 的 数据 ， 所 以 需要 将 它 转 换 成 响应 式 的 
94 const prevShouldObserve = shouldObserve 

65 toggleObserving(true) 

66 observe(value) 

67 toggleObserving(prevShouldObserve) 

68 } 


这 里 使 用 getPropDefaultValue 也 数 获取 prop 的 默认 值 ， 随 后 使 用 observe 函数 将 获取 
的 默认 值 转换 成 响应 式 的 。 而 toggle0bserving 辑 数 可 以 决定 observer 被 调用 时 ， 是 否 会 将 
value 转换 成 响应 式 的 。 因 此 ,代码 中 先 使 用 toggle0bserving(true) ， 然 后 调用 observe， 再 
调用 toggle0bserving(prevShouldobserve) 将 状态 恢复 成 最 初 的 状态 。 

随后 ， 会 在 validateProp 限 数 中 判断 当前 运行 环境 是 否 是 生产 环境 ， 如 果 不 是 ,会 调用 
assertProp 来 断言 prop 是 否 有 效 : 


61 if (process.env.NODE_ENV !== 'production') { 
62 assertProp(prop，key，value，vm，absent) 
63 } 


这 里 assertProp 的 作用 是 当 prop 验证 失败 的 时 候 , 在 非 生产 环境 下 ,Vue.js 将 会 产生 一 个 


控制 台 的 警告 。 


assertProp 函数 的 代码 如 下 : 


91 function assertProp (prop, name, value, vm, absent) { 


02 if (prop.required && absent) { 

63 warn( 

84 "Missing required prop: "'" + name + '"', 

85 vm 

66 ) 

67 return 

98 

69 if (value == null && !prop.required) { 

16 return 

和 } 

12 let type = prop.type 

13 let valid = !type || type === true 

14 const expectedTypes = [] 

15 if (type) { 

16 if (!Array.isArray(type)) { 

17 type = [type] 

18 } 

19 for (let i = 86; i «< type.length && lvalid; i++) { 
26 const assertedType = assertType(value, type[i]) 
21 expectedTypes.push(assertedType.expectedType || '') 


22 valid = assertedType.valid 
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23 } 

24 } 

25 if (!valid) { 

26 warn( 

27 “ Invalid prop: type check failed for prop "${name}". + 
28 ~ Expected ${expectedTypes.map(capitalize).join(', ')} + 
29 “~, got ${toRawType(value)}.., 

30 vm 

31 ) 

32 return 

33 

34 const validator = prop.validator 

35 if (validator) { 

36 if (!validator(value)) { 

37 warn( 

38 "Invalid prop: custom validator check failed for prop "' + name + '".', 
39 vm 

46 ) 

41 } 

42 } 

43 } 


虽然 assertProp 函数 的 代码 看 起 来 有 点 长 ， 但 其 实 逻 辑 并 不 复杂 。 首 先 它 接收 5 个 参数 ， 
分 别 是 prop、name 、value 、vm 和 absent， 它 们 的 含义 如 表 14-1 所 示 。 


表 14-1 assertProp 函数 的 参数 及 其 含义 


人 参 数 含义 

prop prop 选项 

name props 中 prop 选项 的 key 
value prop 数据 ( propData ) 

vm 上 下 文 (this) 

absent prop 数据 中 不 存在 key 属性 


这 个 函数 最 先 处 理 必 填 项 ， 如 果 prop 中 设置 了 必 填 项 ( required 为 true ) 并 且 prop 数据 中 没 
有 这 个 key 属性 ， 那 么 在 控制 台 输 出 警告 ， 并 使 用 return 语句 终止 函数 运行 。 这 里 prop.required 
表示 prop 选项 中 设置 了 必 填 项 ，absent 表示 该 数据 不 存在 。 

随后 处 理 没 有 设置 必 填 项 并 且 value 不 存在 的 情况 ， 这 种 情况 是 合法 的 ， 直 接 返 回 
undefined 即 可 。 这 里 有 一 个 技巧 ， 即 value == null 用 的 是 双 等 号 。 在 双 等 号 中 ,null 和 
undefined 是 相等 的 ， 也 就 是 说 value 是 null 或 undefined 都 会 为 true。 


接 下 来 校 验 类 型 , 其 中 声明 了 3 个 变量 一 type、expectedTypes 和 valid, type 就 是 prop 
中 用 来 校 验 的 类 型 ，valid 表示 是 否 校 验 成 功 。 
通常 情况 下 ，type 是 一 个 原生 构造 函数 或 一 个 数组 ,或 者 用 户 没 提供 type。 如 果 用 户 提供 
了 原生 构造 函数 或 者 数组 ,因为 !type 的 缘故 ,变量 valid 默 认 等 于 false; 如 果 用 户 没 设置 type， 
那么 valid 默认 等 于 true， 即 当 作 校 验 成 功 处 理 。 


224 第 14 章 生命 周期 


但 有 一 种 特例 ， 那 就 是 当 type 等 于 true 的 时 候 。Vue.js 的 props 支持 这 样 的 语法 props: 
{ someProp: true }, 这 说 明 prop 一 定 会 校 验 成 功 。 所 以 当 这 种 语法 出 现 的 时 候 , 由 于 type === 
true， 所 以 valid 变量 的 默认 值 就 是 true。 


说 明 关于 valid 变量 的 默认 值 ， 可 查看 Vue.js 的 GitHub requests 和 Commit。 
requests: https:/github.com/vuejs/vue/pull/3643 。 
commit: https://github.conyvuejs/vue/commit/b47d773c58de077e40edd54a3f5bde2bdfaSfd3d。 


变量 expectedTypes 是 用 来 保存 type 的 列表 ， 当 校 验 失败 ,在 控制 台 打 印 警告 时 ， 可 以 将 
变量 expectedTypes 中 保存 的 类 型 打印 出 来 。 

接 下 来 将 校 验 类 型 。 如 果 用 户 提供 了 type,， 那么 判断 type 是 否 是 一 个 数组 ， 如 果 不 是 ， 就 
将 它 转换 成 数组 。 

接 下 来 循环 type 数组 ， 并 调用 assertType 子 数 校 验 value。assertType 函数 校 验 后 会 返 
回 一 个 对 象 ， 该 对 象 有 两 个 属性 valid 和 expectedType， 前 者 表示 是 否 校 验 成 功 ， 后 者 表示 类 
型 ， 例 如 : {valid: true，expectedType: "Boolean"}。 


然后 将 类 型 添加 到 expectedTypes 中 ， 并 将 valid 变量 设置 为 assertedType.valid。 


当 循 环 结束 后 ， 如 果 变 量 valid 为 true， 就 说 明 校 验 成 功 。 循 环 中 的 条 件 语句 有 这 样 一 名 
话 : !valid， 即 type 列表 中 只 要 有 一 个 校 验 成 功 ， 循 环 就 结束 ， 认 为 是 成 功 了 。 


现在 已 经 校 验 完毕 ， 接 下 来 只 需要 判断 valid 为 false 时 在 控制 台 打 印 警 告 即 可 。 


可 以 看 到 ， 此 时 会 将 expectedTypes 打印 出 来 ， 但 是 在 打印 之 前 先 使 用 map 将 数组 重新 调 
整 了 一 遍 ， 而 capitalize 函数 的 作用 是 将 字符 串 的 一 个 字母 改 成 大 写 。 


我 们 知道 ，prop 支持 自 定 义 验证 函数 ， 所 以 最 后 要 出 来 自 定义 验证 函数 。 在 代码 中 ， 首 先 判 
断 用 户 是 否 设 置 了 validator， 如 果 设 置 了 ， 就 执行 它 ， 否 则 调用 warn 函数 在 控制 台 打 印 警告 。 


当 prop 断言 结束 后 ,我 们 回 到 validateProp 也 数 , 执行 了 最 后 一 行 代 码 , 将 value 返回 。 


14.7.2 ”初始 化 methods 
初始 化 methods 时 ， 只 需要 循环 选项 中 的 methods 对 象 ,并 将 每 个 属性 依次 挂 载 到 vm 上 即 


可 ， 相 关 代码 如 下 : 
61 function initMethods (vm, methods) { 
62 const props = vm.$options.props 
63 for (const key in methods) { 
@4 if (process.env.NODE_ENV !== 'production') { 
65 if (methods[key] == null) { 
66 warn( 


67 “Method "${key}" has an undefined value in the component definition. ~ + 
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68 ‘Did you reference the function correctly?” ， 

09 vm 

16 ) 

11 

12 if (props && hasOwn(props, key)) { 

13 warn( 

14 ‘Method "${key}" has already been defined as a prop.., 

15 vm 

16 ) 

17 

18 if ((key in vm) && isReserved(key)) { 

19 warn( 

26 “Method "${key}" conflicts with an existing Vue instance method. ~ + 
21 ‘Avoid defining component methods that start with _ or $.. 
22 ) 

23 } 

24 } 

25 vm[key] = methods[key] == null ? noop : bind(methods[key], vm) 
26 

27 } 


这 里 先 声明 一 个 变量 props, 用 来 判断 methods 中 的 方法 是 否 和 props 发 生 了 重复 , 然后 使 


用 for.. .in 语句 循环 methods 对 


象 。 


在 循环 中 ， 主 要 逻辑 分 为 两 部 分 : 


口 校 验方 法 是 否 合法 ; 
口 将 方法 挂 载 到 vm 中 。 
1. 校 验方 法 是 否 合法 


在 循环 中 会 判断 执行 环境 ， 在 非 生产 环境 下 需要 校 验 methods 并 在 控制 台 发 出 警告 。 


当 methods 的 某 个 方法 只 有 key 没有 value 时 ， 会 在 控制 台 发 出 警告 。 如 果 methods 中 的 
某 个 方法 已 经 在 props 中 声明 过 了 ， 会 在 控制 台 发 出 警告 。 如 果 methods 中 的 某 个 方法 已 经 存 
在 于 vm 中 ， 并 且 方 法 名 是 以 $ 或 “开头 的 ， 也 会 在 控制 台 发 出 警告 。 这 里 isReserved 冰 数 的 


作用 是 判断 字符 串 是 否 是 以 $ 或 _ 


2. 将 方法 挂 载 到 vm 中 
将 方法 赋值 到 vm 中 很 简单 ， 


开头 。 


详 见 initMethods 方法 的 最 后 一 行 代码 。 其 中 会 判断 方法 


(methods[key] ) 是 否 存 在 : 如 果 不 存 在 ， 则 将 noop 赋值 到 vm[key] 中 ; 如 果 存 在 ， 则 将 该 方 


法 通过 bind 改写 它 的 this 后， 用 


了 赋值 到 vm[key] 中 。 


这 样 ， 我 们 就 可 以 通过 vm.x 访问 到 methods 中 的 x 方法 了 。 


14.7.3 ”初始 化 data 


提 到 data， 相 信 大 家 都 不 陌生 ， 我 们 在 使 用 Vue.js 开发 项 目的 过 程 中 经 常会 用 它 来 保存 一 
些 数据 。 那 么 ，data 内 部 究竟 是 怎样 的 呢 ? 


226 第 14 章 生命 周期 


简单 来 说 ，data 中 的 数据 最 终 会 保存 到 vm. data 中 。 然 后 在 vm 上 设置 一 个 代理 ， 使 得 通 
过 vm.x 可 以 访问 到 vm._data 中 的 x 属性 。 最 后 由 于 这 些 数据 并 不 是 响应 式 数 据 ， 所 以 需要 调 
用 observe 因数 将 data 转换 成 响应 式 数据 。 于 是 ，data 就 完成 了 初始 化 。 


但 在 真正 的 代码 中 ， 需 要 增加 判断 一 些 条 件 ， 如 果 发 现 data 的 使 用 方式 不 正确 ， 那 么 会 在 
出 台 打 印 出 警告 。 初 始 化 data 的 代码 如 下 : 


61 function initData (vm) { 


NN 
2 
二 由 


62 let data = vm.$options.data 

03 data = vm._data = typeof data === 'function’' 

84 ? getData(data, vm) 

65 : data || {} 

66 if (!isplainObject(data)) { 

67 data = {} 

68 process.env.NODE_ENV !== 'production' && warn( 
09 "data functions should return an object:\n' + 
16 "https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', 
11 vm 

1 ) 

3 

14 // 将 data 代理 到 Vue.js 实例 上 

15 const keys = Object.keys(data) 

16 const props = vm.$options.props 

yx const methods = vm.$options.methods 

18 let i = keys.length 

19 while (i--) { 

26 const key = keys[i] 

21 if (process.env.NODE_ENV !== 'production') { 

22 if (methods && hasOwn(methods, key)) { 

23 warn( 

24 “Method "${key}" has already been defined as a data property.， 
25 vm 

26 ) 

27 } 

28 } 

29 if (props && hasOown(props, key)) { 

36 process.env.NODE_ENV !== 'production' && warn( 
31 “The data property "${key}" is already declared as a prop. .+ 
32 ‘Use prop default value instead.， 

33 vm 

34 ) 

35 } else if (!isReserved(key)) { 

36 proxy(vm, `_data’ , key) 

37 } 

38 } 

39 // 观察 数据 

40 observe(data, true /* asRootData */) 

41 } 


在 上 述 代码 中 ， 我 们 首先 从 选项 中 得 到 data， 并 将 其 保存 在 data 变量 中 。 然 后 需要 判断 
data 的 类 型 ， 如 果 是 函数 ， 则 需要 执行 函数 并 将 返回 值 赋值 给 变量 data 和 vm._data。 这 里 我 
们 并 没有 见 到 函数 data 被 执行 ， 而 是 看 到 了 冰 数 getData 被 执行 。 其 实 ， 函 数 getData 中 的 逻 
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辑 也 是 调用 data 函数 并 将 值 返回 ， 只 不 过 getData 中 有 一 些 细节 处 理 ， 比 如 使 用 try.. .catch 
语句 捕获 data 函数 中 有 可 能 发 生 的 错误 等 。 

最 终 得 到 的 data 值 应 该 是 0bject 类 型 ， 否 则 就 在 非 生产 环境 下 在 控制 台 打 印 出 警告 ，3 
为 data 设置 默认 值 ， 也 就 是 空 对 象 。 

接 下 来 要 做 的 事情 是 将 data 代理 到 实例 上 。 代 码 中 首先 声明 了 3 个 变量 : keys 、props 与 
methods。 接 着 循环 data， 其 中 先 判断 当前 执行 环境 ， 如 果 不 是 生产 环境 ,那么 判断 当前 循环 的 
key 是 否 存 在 于 methods 中 ， 如 果 存 在 ,说 明 数 据 重复 了 ， 在 控制 台 打 印 警告 。 

然后 以 同样 的 方式 判断 props 中 是 否 存 在 某 个 属性 与 key 相同 ， 如 果 发 现 确 实 有 相同 的 属 
生 ， 那 么 在 非 生产 环境 下 在 控制 台 打印 警告 。 

只 有 props 中 不 存在 当前 与 key 相同 的 属性 时 ， 才 会 将 属性 代理 到 实例 上 ， 前 提 是 属性 名 
不 能 以 $ 或 “开头 。 

如 果 data 中 的 某 个 key 与 methods 发 生 了 重复 ， 依 然 会 将 data 代理 到 实例 中 ， 但 如 果 与 
props 发 生 了 重复 ， 则 不 会 将 data 代理 到 实例 中 。 

代码 中 调用 了 proxy 函数 实现 代理 功能 。 该 函数 的 作用 是 在 第 一 个 参数 上 设置 一 个 属性 名 为 
第 三 个 参数 的 属性 。 这 个 属性 的 修改 和 获取 操作 实际 上 针对 的 是 与 第 二 个 参数 相同 属性 名 的 属 
性 。proxy 的 代码 如 下 : 


61 const sharedPropertyDefinition = { 


pe 


府 


62 enumerable: true, 

03 configurable: true, 

@4 get: noop, 

@5 set: noop 

66 } 

67 

@8 export function proxy (target, sourceKey, key) { 

69 sharedPropertyDefinition.get = function proxyGetter () { 

16 return this[sourceKey][key] 

11 } 

入 sharedPropertyDefinition.set = function proxySetter (val) { 
13 this[sourceKey][key] = val 

14 } 

15 Object.defineProperty(target, key, sharedpPropertyDefinition) 
16 } 


这 里 先 声明 了 一 个 变量 sharedPropertyDefinition 作为 默认 属性 描述 符 。 


接 下 来 声明 了 proxy 函数 ， 此 函数 接收 3 个 参数 : target、sourceKey 和 key。 随 后 在 代码 
中 设置 了 get 和 set 属性 ， 相 当 于 给 属性 提供 了 getter 和 setter 方法 。 在 getter 方法 中 读 取 了 
this[sourceKey][key]， 在 setter 方法 中 设置 了 this[sourceKey][key] 属性 。 最 后 ， 使 用 


Object.defineProperty 方法 为 target 定义 一 个 属性 ， 属 性 名 为 key， 属 性 描述 符 为 
sharedPropertyDefinition。 


228 ”第 14 章 生命 周期 


通过 这 样 的 方式 将 vm. 


_data 中 的 方法 代理 到 vm 上 。 所 有 属性 


都 代理 后 ， 执 行 observe 郴 


数 将 数据 转换 成 响应 式 的 。 关 于 如 何 将 数据 转换 成 啊 应 式 数据 ， 我 们 在 第 2 章 中 介绍 过 。 


14.7.4 初始 化 computed 
大 家 肯定 对 计算 属性 computed 不 陌生 ， 


在 实际 项 目 中 我 们 会 经 常用 它 。 但 对 于 刚 入 门 的 新 


手 来 说 ， 它 不 是 很 好 理解 ， 它 和 watch 到 底 有 哪些 不 同 呢 ? 本 节 将 详细 介绍 其 内 部 原理 。 
简单 来 说 ，computed 是 定义 在 vm 上 的 一 个 特殊 的 getter 方法。 之 所 以 说 特殊 ,是 因为 在 vm 


上 定义 getter 方 法 时 ，get 并 不 是 用 户 提 供 


的 函数 ， 而 是 Vuejs 内 部 的 一 个 代理 函数 。 在 代理 也 


数 中 可 以 结合 Watcher 实现 缓存 与 收集 依赖 等 功能 。 


我 们 知道 计算 


属性 的 结果 会 被 缓存 , 且 只 有 在 计算 属 
的 返回 值 发 生变 化 时 才 会 重新 计算 。 那 么 , 如 何 


盟 性 所 依赖 的 响应 式 属性 或 者 说 计算 属性 
知道 计算 属性 的 返回 值 是 否 发 生 了 变化 ?这 其 实 


是 结合 Watcher 的 dirty 属性 来 分 辨 的 : 当 dirty 属性 为 true 时 , 说 明 需 要 重新 计算 “计算 属 
性 ”的 返回 值 ， 当 dirty 属性 为 false 时 ， 说 明 计 算 属性 的 值 并 没有 变 ， 不 需要 重新 计算 。 

当 计 算 属 性 中 的 内 容 发 生变 化 后 ， 计 算 属 性 的 Watcher 与 组 件 的 Watcher 都 会 得 到 通知 。 
计算 属性 的 Watcher 会 将 自己 的 dirty 属性 设置 为 true， 当 下 一 次 读 取 计算 属性 时 ， 就 会 重新 


计算 一 次 值 。 然 后 组 件 的 Watcher 也 会 


由 于 要 重新 执行 render 函数 ， 所 以 会 重新 读 取 计算 属 | 
属性 设置 为 true， 所 以 会 重新 计算 一 次 计算 属性 的 值 ， 用 于 本 次 泻 染 。 


把 自己 的 dirty 


简单 来 说 , 计算 属性 会 通过 Watcher 来 观察 
性 会 将 自身 的 Watcher 的 dirty 属性 
性 的 内 部 原理 。 在 模板 中 使 用 了 一 个 数据 演 染 视图 时 ， 如 果 这 个 数据 
会 触发 计算 属性 的 getter 方法 (初始 化 计算 属性 时 


化 时 ,计算 属 


图 14-4 给 出 了 计算 属 
恰好 是 计算 属性 ， 那 么 读 取 数据 这 个 操作 其 实 
在 vm 上 设置 的 getter 方 法 )。 


5. 模板 重新 读 取 计 算 属 性 的 值 。 由 于 
此 时 dirty 为 trrue， 所 以 会 重新 计 
算 一 次 值 用 于 本 次 泻 染 


计算 属 | 


得 到 通知 ， 从 而 执行 render 函数 进行 重新 泻 染 的 操作 。 


性 的 值 ， 这 时 候 计 算 属 性 的 Watcher 已 经 


它 所 用 到 的 所 有 属性 的 变化 , 当 这 些 属 性 发 生变 
设置 为 true， 说 明 自 身 的 返回 值 变 了 。 


性 的 Watcher 3. 通 知 计算 属性 的 Watcher 


ty 加 以 入 和 true a 变化 


和 使 用 watcher 读 取 计 算 属 性 


3 


-一 一 一 


当 数 据 发 生 了 变化 


2. 读 取 计算 属性 函数 中 的 数据 
2. 使 用 Watcher 观 察 数据 的 变化 
(计算 属性 和 组 件 的 Watcher 


3. 通知 组 件 的 Natcher 数 据 发 生 了 


变化 ， 
图 14-4 计算 


属性 的 内 部 原理 
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这 个 getter 方 法 被 触发 时 会 做 两 件 事 。 

口 计算 当前 计算 属性 的 值 ， 此 时 会 使 用 Watcher 去 观察 计算 属性 中 用 到 的 所 有 其 他 数据 的 
变化 。 同 时 将 计算 属性 的 Watcher 的 dirty 属性 设置 为 false， 这样 再 次 读 取 计算 属性 
时 将 不 再 重新 计算 ， 除 非 计算 属性 所 依赖 的 数据 发 生 了 变化 。 

口 当 计算 属性 中 用 到 的 数据 发 生变 化 时 ， 将 得 到 通知 从 而 进行 重新 演 染 操作 。 


注意 ”如果 是 在 模板 中 读 取 计算 属性 ， 那 么 使 用 组 件 的 Watcher 观察 计算 属性 中 用 到 的 所 有 数 
据 的 变化 。 如 果 是 用 户 自 定义 的 watch， 那 么 其 实 是 使 用 用 户 定义 的 Watcher 观察 计算 
属性 中 用 到 的 所 有 数据 的 变化 。 其 区 别 在 于 当 计 算 属 性 函数 中 用 到 的 数据 发 生变 化 时 ， 
向 谁 发 送 通知 。 


以 上 两 件 事 做 完 之 后 ,就 可 以 实现 当 数据 发 生变 化 时 计算 属性 清除 缓存 , 组 件 收 到 通知 去 重 
新 演 染 视图 。 


说 明 计算 属性 的 一 个 特点 是 有 缓存 。 计 算 属性 函数 所 依赖 的 数据 在 没有 发 生变 化 的 情况 下 ， 
会 反复 读 取 计算 属性 ， 而 计算 属性 函数 并 不 会 反复 执行 。 


现在 我 们 已 经 大 致 了 解 了 计算 属性 的 原理 ， 接 下 来 介绍 初始 化 计算 属性 的 具体 实现 ; 


61 const computedWatcherOptions = { lazy: true } 


62 

63 function initComputed (vm, computed) { 

64 const watchers = vm._computedWatchers = Object.create(null) 
65 // 计算 属性 在 SSR 环境 中 ， 只 是 一 个 普通 的 getter 方法 

66 const isSSR = isServerRendering() 

e867 

88 for (const key in computed) { 

89 const userDef = computed[key] 

16 const getter = typeof userDef === 'function' ? userDef : userDef.get 
11 if (process.env.NODE_ENV !== "production' && getter == null) { 
12 warn( 

13 “Getter is missing for computed property "${key}"..， 
14 vm 

15 ) 

16 } 

17 

18 // 在 非 SSR 环境 中 ， 为 计算 属性 创建 内 部 观察 器 

19 if (!1isSSR) { 

26 watchers[key] = new Watcher( 

21 vm, 

22 getter || noop, 

23 noop， 

24 computedWatcherOptions 
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26 } 
27 
28 if (!(key in vm)) { 
29 defineComputed(vm, key, userDef) 
36 } else if (process.env.NODE_ENV !== "production') { 
31 if (key in vm.$data) { 
32 warn( “The computed property "${key}" is already defined in data.  , vm) 
33 } else if (vm.$options.props && key in vm.$options.props) { 
34 warn( The computed property "${key}" is already defined as a prop. , vm) 
35 } 
36 } 
37 } 
38 } 


在 上 述 代码 中 ， 我 们 先 声明 了 变量 computedwatcheroptions， 其 作用 和 它 的 名 字 相 同 ， 是 
一 个 Watcher 选项 。 在 实例 化 Watcher 时 ， 通 过 参数 告诉 Watcher 类 应 该 生成 一 个 供 计算 属性 
使 用 的 watcher 实例 。 


initComputed 函数 的 作用 是 初始 化 计算 属性 ， 它 接收 如 下 两 个 参数 。 


口 vm: Vuejs 实例 上 下 文 (this ) 。 
口 computed: 计算 属性 对 象 。 


随后 在 vm 上 新 增 了 _computedwatchers 属性 并 且 声 明了 变量 watchers， 其 值 为 一 个 空 的 
对 象 ， 而 _computedwatchers 属性 用 来 保存 所 有 计算 属性 的 watcher 实例 。 


说 明 ”0bject.create(null) 创 建 出 来 的 对 象 没有 原型 ， 它 不 存在 proto _ 属性 。 


后 声明 的 变量 isssR 用 于 判断 当前 运行 环境 是 否 是 SSR ( 服务 端 泻 染 ), isServerRendering 


随 
工具 函数 执行 后 ， 会 返回 一 个 布尔 值 用 于 判断 是 否 是 服务 端 演 染 环境 。 

接 下 来 ,使 用 for.. .in 循环 computed 对 象 ， 依 次 初始 化 每 个 计算 属性 。 在 循环 中 先 声明 
变量 userDef 来 保存 用 户 设置 的 计算 属性 定义 ,然后 通过 userDef 获取 getter 函数 。 这 里 只 需 
要 判断 用 户 提供 的 计算 属性 是 否 是 函数 ， 如 果 是 函数 ， 则 将 这 个 函数 当 作 getter ， 否 则 默认 将 


用 户 提供 的 计算 属性 当 作 对 象 处 理 


,获取 对 象 的 get 方法 。 这 时 如 果 用 户 传 人 的 计算 属性 不 合法 ， 


也 就 是 说 既 不 是 函数 , 也 不 是 对 象 , 或 者 提供 了 对 象 但 没有 提供 get 方法 ,就 在 非 生产 环境 下 在 
控制 台 打 印 警告 以 提示 用 户 。 
随后 判断 当前 环境 是 否 是 服务 端 泻 染 环境 ， 如 果 不 是 ， 就 需要 创建 watcher 实例 。Watcher 
在 整个 计算 属性 内 部 原理 中 非常 重要 , 后 面 我 们 会 介绍 它 的 作用 。 创建 watcher 实例 时 有 一 个 细 
节 需 要 注意 ， 即 第 二 个 参数 的 getter 其 实 是 用 户 设置 的 计算 属性 的 get 函数 。 
最 后 ， 判 断 当 前 循环 到 的 计算 属性 的 名 字 是 否 已 经 存在 于 vm 中 : 如 果 存 在 ， 则 在 非 生产 环 


境 下 的 控 


所 人 台 打印 警告 ， 如 果 不 存 在 ， 则 使 用 defineComputed 函数 在 vm 上 设置 一 个 计算 属性 。 
这 里 有 一 个 细节 需要 注意 ， 那 就 是 当 计算 属性 的 名 字 已 经 存在 于 vm 中 时 ， 说 明 已 经 有 了 一 个 重 
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名 的 data 或 者 props， 也 有 可 能 是 与 methods 重 名 ， 这 时 候 不 会 在 vm 上 定义 计算 属性 。 


但 在 Vuejs 中 ， 只 有 与 data 和 props 重 名 时 ， 才 会 打印 警告 。 如 果 与 methods 重 名 ， 并 不 
会 在 控制 台 打 印 警告 。 所 以 如 果 与 methods 重 名 , 计算 属性 会 悄悄 失效 , 我 们 在 开发 过 程 中 应 该 
尽量 避免 这 种 情况 。 


人 0 


再 


此 外 ， 还 需要 说 明 一 下 defineComputed 范 数 ， 它 有 3 个 参数 : vm、key 和 userDef。 其 完 
Re 

61 const sharedPropertyDefinition = { 

82 enumerable: true, 

03 configurable: true, 

@4 get: noop, 

@5 set: noop 

66 } 

87 

868 export function defineComputed (target, key, userDef) { 

69 const shouldCache = !isserverRendering() 

16 if (typeof userDef === 'function') { 

11 sharedPropertyDefinition.get = shouldCache 

12 ? createComputedGetter(key) 

13 : UserDef 

14 sharedPropertyDefinition.set = noop 

15 } else { 

16 sharedPropertyDefinition.get = userDef.get 

17 ? shouldCache && userDef.cache !== false 

18 ? createComputedGetter(key) 

19 : UserDef .get 

26 : noop 

21 sharedPropertyDefinition.set = userDef.set 

22 ? UserDef .set 

23 : noop 

24 } 

25 if (process.env.NODE_ENV !== 'production' && 

26 sharedPropertyDefinition.set === noop) { 

27 sharedPropertyDefinition.set = function () { 

28 warn( 

29 ‘Computed property "${key}" was assigned to but it has no setter.， 

36 this 

31 ) 

32 } 

33 } 

34 Object.defineproperty(target, key, sharedPropertyDefinition) 

35 } 

在 上 述 代码 中 ， 先 定义 了 变量 sharedPropertyDefinition， 它 的 作用 与 14.7. 3 0 
proxy 函数 所 使 用 的 sharedPropertyDefinition 变量 相同 。 在 源码 中 ， 个 函数 使 
用 的 其 实 是 同一 个 变量 , 这 个 变量 是 一 个 默认 的 属性 描述 符 , 它 ee 
配合 使 用 。 


接着 ， 子 数 defineComputed 接收 3 个 参数 target 、key 和 userDef， 其 意思 是 在 target 
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上 定义 一 个 key 属性 ， 属 性 的 getter 和 setter 根据 userDef 的 值 来 设置 。 
然后 函数 中 声明 了 变量 shouldcache， 它 的 作用 是 判断 computed 是 否 应 该 有 缓存 。 这 里 调 
用 isserverRendering 消 数 来 判断 当前 环境 是 否 是 服务 端 泻 染 环境 。 因 此 ， 变 量 shouldCache 
只 有 在 非 服务 端 泻 染 环境 下 才 为 true。 也 就 是 说 ， 只 有 在 非 服务 端 演 染 环境 下 ， 计算 属 性 才 有 
缓存 。 
接 下 来 , 判断 userDef 的 类 型 。Vue.js 支持 用 户 设置 两 种 类 型 的 计算 属性 : 函数 和 对 象 。 例如 : 


61 var vm = new Vue({ 


62 data: { a: 1 }, 

63 computed: { 

64 // 仅 读 取 

65 aDouble: function () { 
66 return this.a * 2 
67 }, 

68 // 读 取 和 设置 

69 aPlus: { 

16 get: function () { 
11 return this.a + 1 
12 }， 

13 set: function (v) { 
14 this.a=v-1 

15 } 

16 } 

17 } 

18 })) 


所 以 在 定义 计算 属性 时 , 需要 判断 userDef 的 类 型 是 函数 还 是 对 象 。 如 果 是 函数 , 则 将 函数 
理解 为 getter 函数 。 如 果 是 对 象 , 则 将 对 象 的 get 方法 作为 getter 方法 , set 方法 作为 setter 
方法 。 

这 里 有 一 个 细节 需要 注意 , 我 们 要 通过 判断 shouldCache 来 选择 将 get 设置 成 userDef 这 种 
普通 的 getter 也 数 ， 还 是 设置 为 计算 属性 的 getter 函数 。 其 区 别 是 如 果 将 sharedProperty- 
Definition.get 设置 为 userDef 因数 ， 那 么 这 个 计算 属性 只 是 一 个 普通 的 getter 方法 ,没有 
缓存 。 当 计算 属性 中 所 使 用 的 数据 发 生变 化 时 ， 计 算 属 性 的 Watcher 也 不 会 得 到 任何 通知 ,使 用 
计算 属性 的 Watcher 也 不 会 得 到 任何 通知 。 它 就 是 一 个 普通 的 getter, 每 次 读 取 操作 都 会 执行 一 
人 遍 函 数 。 这 种 情况 通常 在 服务 端 泻 染 环境 下 生效 ， 因 为 数据 响应 式 的 过 程 在 服务 器 上 是 多 余 的 。 
如 果 将 sharedPropertyDefinition.get 设置 为 计算 属性 的 getter, 那么 计算 属性 将 具备 缓存 和 
观察 计算 属性 依赖 数据 的 变化 等 响应 式 功能 。 稍 后 , 我 们 再 介绍 createComputedGetter 的 实现 。 

由 于 用 户 并 没有 设置 setter 国 数 ， 所 以 将 sharedPropertyDefinition.set 设置 为 noop， 
而 noop 是 一 个 空隙 数 。 

如 果 userDef 的 类 型 不 是 函数 , 那么 假设 它 是 对 象 类 型 。 在 else 语句 中 先 设置 sharedProperty- 
Definition.get， 后 设置 sharedPropertyDefinition.set。 设置 sharedPropertyDefinition.get 
时 需要 判断 userDef.get 是 否 存在 。 如 果 不 存在 ， 则 将 sharedPropertyDefinition.get 设置 
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成 noop。 如 果 存在 ， 那么 逻辑 和 前 面 介绍 的 相同 ， 如 果 shouldCache 为 true 并 且 用 户 没有 明 
确 地 将 userDef.cache 设置 为 false, 则 调用 createComputedGetter 因数 将 sharedProperty- 
Definition.get 设置 成 计算 属性 的 getter 子 数 ， 否 则 将 sharedPropertyDefinition. get 设 
置 成 普通 的 getter 也 数 userDef. get。 


设置 完 getter 后 设置 setter。 这 简单 很 多 ， 只 需要 判断 userDef.set 是 否 存在 ， 如 果 存 
在 ， 则 将 sharedPropertyDefinition.set 设置 为 userDef.set， 否 则 设置 为 noop。 


如 果 用 户 在 没有 设置 setter 的 情况 下 对 计算 属性 进行 了 修改 操作 ，Vue.js 会 在 非 生产 环境 
下 在 控制 台 打 印 警告 。 其 实现 原理 很 简单 ， 如 果 用 户 没 有 设置 setter 函数 ， 那 么 为 计算 属性 设 
置 一 个 默认 的 setter 函数 ， 并 且 当 函数 执行 时 ， 打 印 出 警告 即 可 。 


在 defineComputed 函数 的 最 后 , 我 们 调用 0bject.defineProperty 方法 在 target 对 象 上 
设置 key 属性 ， 其 中 属性 描述 符 为 前 面 我 们 设置 的 sharedPropertyDefinition。 计算 属性 就 是 
这 样 被 设置 到 vm 上 的 。 

通过 前 面 的 介绍 ， 我 们 发 现 计算 属性 的 缓存 与 响应 式 功 能 主要 在 于 是 否 将 getter 方法 设置 
为 ee 函数 执行 后 的 返回 结果 。 下面 我 们 介绍 createComputedGetter 函数 
是 如 何 实现 缓存 以 及 响应 式 功 能 的 ， 其 代码 如 下 : 


61 function createComputedGetter (key) { 


62 return function computedGetter () { 
03 const watcher = this. computedWatchers && this._ computedWwatchers[key] 
84 if (watcher) { 

685 if (watcher.dirty) { 

66 watcher.evaluate() 

87 

88 if (Dep.target) { 

69 watcher.depend() 

16 } 

11 return watcher.value 

12 } 

13 } 

14 } 


这 个 了 水 数 是 一 个 高 阶 函 数 ， 它 接收 一 个 参数 key 并 返回 另 一 个 函数 computedGetter。 


通过 前 面 的 介绍 知道 ,最 终 被 设置 到 getter 方法 中 的 函数 其 实 是 被 返回 的 computedGetter 
函数 。 在 非 服务 端 演 染 环境 下 ， 每 当 计 算 属性 被 读 取 时 ，computedGetter 孙 数 都 会 被 执行 。 


在 computedGetter 哺 数 中 , 先 使 用 key 从 this._computedwatchers 中 读 出 watcher 并 赋 
值 给 变量 watcher。 而 this._computedwatchers 属性 保存 了 所 有 计算 属性 的 watcher 实例 。 


如 果 watcher 存在 , 那么 判断 watcher.dirty 是 否 为 true。 前 面 我 们 介绍 watcher.dirty 
时 性 用 于 标识 计算 属性 的 返回 值 是 否 有 变化 ， 如 果 它 为 true， 说 明 计 算 属 性 所 依赖 的 状态 发 生 
了 变化 ， 它 的 返回 值 有 可 能 也 会 有 变化 ， 所 以 需要 重新 计算 得 出 最 新 的 结果 。 


计算 属性 的 缓存 就 是 通过 这 个 判断 来 实现 的 。 每 当 计 算 属 性 所 依赖 的 状态 发 生变 化 时 , 会 将 


3 于 
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watcher.dirty 设置 为 true， 这 样 当 下 一 次 读 取 计算 属性 时 ， 会 发 现 watcher.dirty 为 true， 


此 时 会 重新 计算 返回 值 ， 否 则 就 直接 使 用 之 前 的 计算 结 


随后 判断 Dep.target 是 否 存在 ， 
的 在 于 将 读 取 计算 属性 的 那个 Watch 


计算 属性 中 用 到 的 另 一 个 状态 给 改 了 , 模板 会 重新 泻 染 


这 是 因为 组 件 的 Watcher 观察 了 计算 属 
的 状态 发 生变 化 时 ， 组 件 的 Watcher 会 得 到 通知 ， 然 后 就 会 执行 习 


第 2 章 介 绍 Watcher 时 ,并 没有 介 
与 evaluate 方法 专门 用 于 实现 计算 属 


如 果 存 在 ， 则 调用 watcher. de 


pend 方法 。 这 段 代码 的 目 


er 添加 到 计算 属性 所 依赖 的 所 有 状态 的 依赖 列表 中 。 换 句 话 
说 ， 就 是 让 读 取 计算 属性 的 那个 watcher 持续 观察 计算 属性 所 依赖 的 状态 的 变化 。 


使 用 计算 属性 的 同学 大 多 会 有 一 个 疑问 : 为 什么 我 在 模板 里 只 使 用 了 一 个 计算 属性 , 但 是 把 


绍 其 depend 与 evaluate 方法 。 引 


属性 相关 的 功能 ， 代 码 如 下 : 


@1 export default class Watcher { 


02 constructor (vm, expOrFn, cb, options) { 
63 // 隐藏 无 关 代 码 

084 

65 if (options) { 

86 this.lazy = !!options.1lazy 
67 } else { 

08 this.lazy = false 

69 } 

16 

11 this.dirty = this.1azy 
12 

13 this.value = this.1azy 
14 ? undefined 

15 : this.get() 

16 } 

17 

18 evaluate () { 

19 this.value = this.get() 
26 this.dirty = false 

21 } 

22 

23 depend () { 

24 let i = this.deps.length 
25 while (i--) { 

26 this.deps[i].depend() 
27 

28 } 

29 } 


可 以 看 到 ,evaluate 方法 的 逻辑 


this.dirty 设置 为 false。 


， 它 是 怎么 知道 自己 需要 重新 泻 染 的 呢 ? 
导 性 中 所 依赖 的 所 有 状态 的 变化 。 当 计算 属性 中 所 依赖 


EE 新 演 染 操作 。 
事实 上 ,其 中 定义 了 depend 


很 简单 ,就 是 执行 this .get 方法 重新 计算 一 下 值 , 然后 将 


虽然 depend 方法 的 代码 不 多 , 但 它 的 作用 并 不 简单 。 从 代码 中 可 以 看 到 ,Watcher.depend 


方法 会 遍历 this.deps 属性 (该 属 怕 


中 保存 了 计算 属性 用 到 的 所 有 状态 的 dep 实例 ， 而 每 个 属 
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性 的 dep 实例 中 保存 了 它 的 所 有 依赖 )， 并 依次 执行 dep 实例 的 depend 方法 。 

执行 dep 实例 的 depend 方法 可 以 将 组 件 的 watcher 实例 添加 到 dep 实例 的 依赖 列表 中 。 换 
名 话说 ,this.deps 是 计算 属性 中 用 到 的 所 有 状态 的 dep 实例 , 而 依次 执行 了 dep 实例 的 depend 
方法 就 是 将 组 件 的 Watcher 依次 加 入 到 这 些 dep 实例 的 依赖 列表 中 ， 这 就 实现 了 让 组 件 的 
Watcher 观察 计算 属性 中 用 到 的 所 有 状态 的 变化 。 当 这 些 状态 发 生变 化 时 , 组 件 的 Watcher 会 收 
到 通知 ， 从 而 进行 重新 泻 染 操作 。 

前 面 我 们 介绍 的 计算 属性 原理 是 Vuejs 在 2.5.2 版 本 中 的 实现 。Vuejs 在 2.5.17 版 本 中 , 对 计 
算 属 性 的 实现 方式 做 了 一 个 改动 , 这 个 改动 使 得 计算 属性 的 原理 有 一 些 不 太一 样 的 地 方 , 这 是 因 
为 现 有 的 计算 属性 存在 着 一 个 问题 。 

前 面 我 们 介绍 组 件 的 Watcher 会 观察 计算 属性 中 用 到 的 所 有 数据 的 变化 。 这 就 导致 一 个 问 
题 : 如 果 计 算 属 性 中 用 到 的 状态 发 生 了 变化 , 但 最 终 计算 属性 的 返回 值 并 没有 变 , 这 时 计算 属性 
依然 会 认为 自己 的 返回 值 变 了 ， 组 件 也 会 重新 走 一 遍 泻 染 流程 。 只 不 过 最 终 由 于 虚拟 DOM 的 
Dif 中 发 现 没 有 变化 ， 所 以 在 视觉 上 并 不 会 发 现 UI[ 有 变化 ， 其 实 泻 染 函数 会 被 执行 。 

也 就 是 说 , 计算 属性 只 是 观察 它 所 用 到 的 所 有 数据 是 否 发 生 了 变化 , 但 并 没有 真正 去 校 验 它 
自身 的 返回 值 是 否 有 变化 , 所 以 当 它 所 使 用 的 数据 发 生变 化 后 , 它 就 认为 自己 的 返回 值 也 会 有 变 
化 ， 但 事实 并 不 总 是 这 样 。 

有 人 在 Vue.jjs 的 GitHub Issues 里 提出 了 这 个 问题 ， 地 址 为 https://github.com/vuejs/vue/issues/ 
7767。 同 时 ， 他 还 给 出 了 一 个 案例 来 演示 这 个 问题 ， 地 址 : https://jsfiddle.net/72gzmayL/。 


为 了 解决 这 个 问题 , 作者 把 计算 属性 的 实现 做 了 一 些 改动 , 改动 后 的 逻辑 是 :组 件 的 Watcher 
不 再 观察 计算 属性 用 到 的 数据 的 变化 , 而 是 让 计算 属性 的 watcher 得 到 通知 后 , 计算 一 次 计算 属 
性 的 值 ， 如 果 发 现 这 一 次 计算 出 来 的 值 与 上 一 次 计算 出 来 的 值 不 一 样 ， 再 去 主动 通知 组 件 的 
Watcher 进行 重新 泻 染 操 作 。 这 样 就 可 以 解决 前 面 提 到 的 问题 , 只 有 计算 属性 的 返回 值 真 的 变 了 ， 
才 会 重新 执行 泻 染 函 数 。 

14-5 给 出 了 新 版 计算 属性 的 内 部 原理 。 与 之 前 最 大 的 区 别 就 是 组 件 的 Watcher 不 再 观察 
数据 的 变化 了 ， 而 是 只 观察 计算 属性 的 Watcher (把 组 件 的 watcher 实例 添加 到 计算 属性 的 


watcher 实例 的 依赖 列表 中 )， 然 后 计算 属性 主动 通知 组 件 是 否 需 要 进行 泻 染 操作 。 
计算 属性 的 h 通知 计算 属性 的 Natcher 
全 促 生 新 尖 和 数据 发 生 了 变化 


i 数据 发 生 了 变化 时 
tetris me Rs 
图 14-5 ”新 版 计算 属性 的 内 部 原理 
此 时 计算 属性 的 getter 被 触发 时 做 的 事情 发 生 了 变化 ， 它 会 做 下 面 两 件 事 


访 


O 
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口 使 用 组 件 的 Watcher 观察 计算 属性 的 Watcher， 也 就 是 把 组 件 的 Watcher 添加 到 计算 
性 的 Watcher 的 依赖 列表 中 ， 让 计算 属性 的 Watcher 问 组 件 的 Watcher 发 送 通知 。 

口 使 用 计算 属性 的 Watcher 观察 计算 属性 函数 中 用 到 的 所 有 数据 ， 当 这 些 数据 发 生变 化 
时 ， 向 计算 属性 的 Watcher 发 送 通知 。 


al 


注意 ”如果 是 在 模板 中 读 取 计算 属性 ， 那 么 使 用 组 件 的 Watcher 观察 计算 属性 的 Watcher; 如 
果 是 用 户 使 用 vm.$watch 定义 的 Watcher， 那 么 其 实 是 使 用 用 户 定义 的 Watcher 观察 计 
算 属 性 的 Watcher。 其 区 别 是 当 计 算 属 性 通过 计算 发 现 自己 的 返回 值 发 生变 化 后 ， 计 算 
属性 的 Watcher 向 谁 发 送 通知 。 


修复 这 个 问题 的 Pull Requests 地 址 为 : https:/github.com/vuejs/vue/puly7824。 下 面 来 看 一 下 
这 个 Pull Requests 都 有 哪些 修改 。 


首先 createComputedGetter 函数 中 的 内 容 发 生 了 变化 ， 改 动 后 的 代码 如 下 : 


61 function createComputedGetter (key) { 


62 return function computedGetter () { 

03 const watcher = this. computedWatchers && this. computedWwatchers[key] 
@4 if (watcher) { 

65 watcher.depend() 

66 return watcher.evaluate() 

67 } 

68 } 

69 } 


改动 后 的 函数 依然 是 一 个 高 阶 函 数 , 依然 返回 computedGetter 函数 , 但 是 computedGetter 
函数 中 的 内 容 发 生 了 变化 。 从 代码 上 看 ， 改 动 后 的 代码 比 改 动 前 的 代码 少 了 很 多 。 

computedGetter 子 数 依然 是 先 使 用 key 从 this._ computedwatchers 中 读 出 watcher 并 赋 
值 给 变量 watcher 。 随 后 判断 watcher 是 否 存 在 ， 如 果 存 在 ， 则 执行 watcher.depend() 和 
watcher.evaluate() ， 并 将 watcher.evaluate() 的 返回 值 当 作 计 算 属 性 函数 的 计算 结果 返回 
出 去 。 

depend 方法 被 执行 后 ， 会 将 读 取 计 算 属 性 的 那个 watcher 添加 到 计算 属性 的 Watcher 的 依 
赖 列表 中 ， 这 可 以 让 计算 属性 的 Watcher 向 使 用 计算 属性 的 watcher 发 送 通知 。 

Watcher 的 代码 变 成 了 下 面 的 样子 : 


861 export default class Watcher { 


62 constructor (vm, expOrFn, cb, options) { 
63 // 隐藏 无 关 代 码 

94 

65 if (options) { 

86 this.computed = !!options.computed 
67 } else { 


68 this.computed = false 
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69 
16 
11 
12 
13 
14 
15 
16 
7 
18 
19 
26 
21 
22 
23 
24 
25 
26 
27 
28 
29 
36 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
56 
51 
52 
53 
54 
55 
56 
57 
58 
59 
66 
61 
62 


} 
this.dirty = this.computed 


if (this.computed) { 
this.value = undefined 
this.dep = new Dep() 
} else { 
this.value = this.get() 
} 
} 


update () { 
if (this.computed) { 

if (this.dep.subs.length === 6) { 
this.dirty = true 

} else { 
this.getAndInvoke(() => { 

this.dep.notify() 

}) 

} 


} 
// 隐藏 无 关 代 码 
} 


getAndInvoke (cb) { 
const value = this.get() 
if ( 
value !== this.value || 
isObject(value) || 
this.deep 
) 人 
const oldValue = this.value 
this.value = value 
this.dirty = false 
if (this.user) { 
try { 
cb.call(this.vm, value, oldValue) 
} catch (e) { 
handleError(e, this.vm, ”~ callback for watcher 
} 
} else { 
cb.call(this.vm, value, oldValue) 
} 
} 
} 


evaluate () { 
if (this.dirty) { 
this.value = this.get() 
this.dirty = false 


} 


return this.value 


${this.expression}"  ) 


238 第 14 章 生命 周期 


64 depend () 1 

65 if (this.dep && Dep.target) { 
66 this.dep.depend() 

67 } 

68 } 

69 } 


可 以 看 到 ，evaluate 方法 稍微 有 点 改动 ， 但 并 不 是 很 大 。 先 通过 dirty 属性 判断 返回 值 是 
否 发 生 了 变化 ,如 果 发 生 了 变化 ,就 执行 get 方法 重新 计算 一 次 ,然后 将 dirty 属性 设置 为 false， 
表示 数据 已 经 是 最 新 的 ， 不 需要 重新 计算 ， 最 后 返回 本 次 计算 出 来 的 结果 。 
depend 方法 的 改动 有 点 大 , 这 一 次 不 再 是 将 Dep.target 添加 到 计算 属性 所 用 到 的 所 有 数据 
的 依赖 列表 中 ， 而 是 改 成 了 将 Dep.target 添加 到 计算 属性 的 依赖 列表 中 。this .dep 用 于 在 实 
例 化 Watcher 时 进行 判断 ， 如 果 为 计算 属性 用 的 Watcher， 则 实例 化 一 个 dep 实例 并 将 其 放 在 
this .dep 属性 上 。 
当 计算 属性 中 用 到 的 数据 发 生变 化 时 ， 计 算 属 性 的 Watcher 的 update 方法 会 被 执行 ， 此 时 
会 判断 当前 Watcher 是 不 是 计算 属性 的 Watcher ,如 果 是 , 那么 有 两 种 模式 , 一 种 是 主动 发 送 通 
知 ， 另 一 种 是 将 dirty 设置 为 true。 行业 术语 中 ， 这 两 种 方式 分 别 叫 作 activated 和 lazy。 
从 代码 中 可 以 看 出 , 分 辨 这 两 种 模式 可 以 使 用 依赖 的 数量 ,，activated 模式 要 求 至 少 有 一 个 
依赖 。 其 实 也 可 以 理解 ， 如 果 没 有 任何 依赖 ， 那 么 主动 去 向 谁 发 送 通 知 呢 ? 
大 部 分 情况 下 都 是 有 依赖 的 , 这 个 依赖 有 可 能 是 组 件 的 Watcher, 这 取决 于 谁 读 取 了 计算 属性 。 
我 们 假设 这 个 依赖 是 组 件 的 Watcher, 那么 当 计 算 属性 所 使 用 的 数据 发 生变 化 后 ,会 执行 计 
属性 的 Watcher 的 update 方法 。 随 后 可 以 看 到 ， 发 送 通 知 的 代码 是 在 this.getAndInvoke 
数 的 回调 中 执行 的 。 可 以 很 明确 地 告诉 你 ， 这 个 函数 的 作用 是 对 比 计算 属性 的 返回 值 。 只 有 计 
属性 的 返回 值 真 的 发 生 了 变化 , 才 会 执行 回调 , 从 而 主动 发 送 通知 让 组 件 的 Watcher 去 执行 重 
新 泻 染 逻 辑 。 


中 员 站 


14.7.5 ”初始 化 watch 
初始 化 状态 的 最 后 一 步 是 初始 化 watch。 在 initstate 国 数 的 最 后 ， 有 这 样 一 行 代 码 : 


61 if (opts.watch && opts.watch !== nativeWatch) { 
62 initWatch(vm, opts.watch) 
63 } 


只 有 当 用 户 设置 了 watch 选项 并 且 watch 选项 不 等 于 浏览 器 原生 的 watch 时 ， 才 进行 初始 
化 watch 的 操作 。 

之 所 以 使 用 这 样 的 语句 (opts.watch !== nativeWatch ) 判断 ， 是 因为 Firefox 浏览 器 中 的 
Object.prototype 上 有 一 个 watch 方法 。 当 用 户 没 有 设置 watch 时 ,在 Firefox 浏览 器 下 的 
opts .watch 将 是 0bject.prototype.watch 国 数 ， 所 以 通过 这 样 的 语句 可 以 避免 这 种 问题 。 


14.7 初始 化 状态 239 


代码 中 通过 调用 initwatch 函数 并 传递 两 个 参数 vm 和 opts .watch 来 初始 化 watch 选项 。 
这 里 我 们 先 简单 回顾 watch 的 使 用 方式 。 
口 类 型 . { [key: string]: string | Function | Object | Array } 
D 介绍 : 一 个 对 象 ， 其 中 键 是 需要 观察 的 表达 式 ， 值 是 对 应 的 回调 函数 ， 也 可 以 是 方法 名 
或 者 包含 选项 的 对 象 。Vue.js 实例 将 会 在 实例 化 时 调用 vm.gwatch() 遍历 watch 对 象 的 
每 一 个 属性 。 


口 示例 : 
61 var vm = new Vue({ 
62 data: { 
63 a: 1， 
04 bs -25 
65 Ct: 35 
66 d: 4， 
67 e: { 
68 f: { 
69 g: 5 
16 } 
11 } 
12 }, 
13 watch: { 
14 a: function (val, oldVal) { 
25 console.log('new: %s, old: %s', val, oldVal) 
16 }, 
17 // 方法 名 
18 b: 'someMethod', 
19 // 深度 watcher 
26 下 
21 handler: function (val, oldVal) { /* ... */ }, 
22 deep: true 
23 }, 
24 // 该 回调 将 会 在 侦 听 开始 之 后 被 立即 调用 
25 d: { 
26 handler: function (val, oldVal) { /* ... */ }, 
27 immediate: true 
28 }, 
29 e: [ 
36 function handlel (val, oldVal) { /* ... */ }, 
31 function handle2 (val, oldVal) { /* ... +*/ } 
32 ]， 
33 // watch vm.e.f's value: {g: 5} 
34 "e.f': function (val, oldVal) { /* ... */ } 
35 } 
36 })) 


37 vm.a = 2 // => new: 2, old: 1 
初始 化 watch 选项 的 实现 思路 并 不 复杂 ,前 面 也 略微 提 到 了 。watch 选项 的 功能 和 vm. $watch 
(其 内 部 原理 可 以 参见 4.1 节 ) 是 相同 的 ， 所 以 只 需要 循环 watch 选项 ， 将 对 象 中 的 每 一 项 依次 
调用 vm.$watch 方法 来 观察 表达 式 或 computed 在 Vue.js 实例 上 的 变化 即 可 。 


由 于 watch 选项 的 值 同 时 支持 字符 串 、 函 数 、 对 象 和 数组 类 型 ， 不 同 的 类 型 有 不 同 的 用 法 ， 
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所 以 在 调用 vm.$watch 之 前 需要 对 这 些 类 型 做 一 些 适 配 。initWatch 函数 的 代码 如 下 : 


61 function initNatch (vm, watch) { 


62 for (const key in watch) { 

63 const handler = watch[key] 

84 if (Array.isArray(handler)) { 

@5 for (let i = 6; i < handler.length; i++) { 
86 createWatcher(vm, key, handler[i]) 
e7 

68 } else { 

69 createWatcher(vm, key, handler) 

16 } 

11 } 

125 字 


它 接收 两 个 参数 vm 和 watch， 后 者 是 用 户 设置 的 watch 对 象 。 随 后 使 用 for. . .in 循环 遍 
历 watch 对 象 ， 通 过 key 得 到 watch 对 象 的 值 并 赋值 给 变量 handler。 


此 时 变量 handler 的 类 型 是 不 确定 的 , watch 选项 的 值 其 实 可 以 大 致 分 为 两 类 :数组 和 其 他 。 
数组 中 的 每 一 项 可 以 是 其 他 任意 类 型 , 所 以 代码 中 先 处 理 数 组 的 情况 。 如果 handler 的 类 型 是 数 
组 ， 那 么 遍历 数组 并 将 数组 中 的 每 一 项 依次 调用 createwatcher 函数 来 创建 Watcher。 如 果 不 
是 数组 ， 那 么 直接 调用 createWatcher 函数 创建 一 个 Watcher。 


createWatcher 国 数 主要 负责 处 理 其 他 类 型 的 handler 并 调用 vm.$watch 创建 Watcher 观 
察 表达 式 ， 其 代码 如 下 : 


61 function createWatcher (vm, expOrFn, handler, options) { 


62 if (isplainObject(handler)) { 

93 options = handler 

84 handler = handler.handler 

e5 

86 if (typeof handler === 'string') { 

67 handler = vm[handler] 

68 } 

89 return vm.$watch(expOrFn, handler, options) 
10 } 

它 接收 如 下 4 个 参数 。 


口 vm: Vuejs 实例 上 下 文 (this ) 。 

口 exporFn: 表达 式 或 计算 属性 函数 。 

D handler: watch 对 象 的 值 。 

口 options: 用 于 传递 给 vm.$watch 的 选项 对 象 。 


执行 createWatcher 阴 数 时 ,handler 的 类 型 有 三 种 可 能 :字符 串 、 晒 数 和 对 象 . 如 果 handler 
的 类 型 是 函数 ， 那 么 不 用 特殊 处 理 ， 直 接 把 它 传递 给 vm.$watch 即 可 。 如 果 是 对 象 ， 那 么 说 明 
用 户 设置 了 一 个 包含 选项 的 对 象 ， 因 此 将 options 的 值 设 置 为 handler， 并 且 将 变量 handler 
设置 为 handler 对 象 的 handler 方法 。 如 果 handler 的 类 型 是 字符 串 ， 那 么 从 vm 中 取出 方法 ， 
将 它 赋 值 给 handler 变量 即 可 。 
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针对 不 同类 型 的 值 处 理 完毕 后 ，handler 变量 是 回调 函数 ，options 为 vm.$watch 的 选项 ， 
所 以 接 下 来 只 需要 调用 vm.gwatch 即 可 完成 初始 化 watch 的 任务 。 


14.8 初始 化 provide 
如 图 14-2 所 示 ， 状 态 初始 化 的 下 一 步 是 初始 化 provide ， 本 节 中 我 们 将 介绍 provide 的 内 
部 原理 。 


provide 选项 应 该 是 一 个 对 象 或 者 是 返回 一 个 对 象 的 孔 数 。 该 对 象 包含 可 注入 其 子孙 的 属 
性 。 在 该 对 象 中 ， 你 可 以 使 用 ES2015 Symbol 作为 key， 但 是 它 只 在 原生 支持 symbol 和 
Reflect.ownKeys 的 环境 下 工作 。 


14.6.1 节 详 细 介 绍 了 provide/inject 的 使 用 方式 ， 本 节 将 不 再 重复 介绍 。 
初始 化 provide 时 ， 只 需要 将 provide 选项 添加 到 vm._provided 即 可 ， 相 关 代码 如 下 : 


861 export function initProvide (vm) { 


82 const provide = vm.$options.provide 

83 if (provide) { 

64 vm._provided = typeof provide === 'function’' 
85 ? provide.call(vm) 

066 : provide 

67 于 

68 } 


这 里 首先 判断 provide 的 类 型 是 否 是 函数 , 如 果 是 , 则 执行 函数 , 将 返回 值 赋值 给 vm._provided， 
否则 直接 将 变量 provide 赋值 给 vm._ provided。 
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本 章 详细 介绍 了 new Vvue() 被 执行 时 Vue.js 的 背后 发 生 了 什么 。 

Vue.js 的 整体 生命 周期 可 以 分 为 4 个 阶段 : 初始 化 阶段 、 模 板 编译 阶段 、 挂 载 阶 段 和 卸载 阶 
段 。 初 始 化 阶段 结束 后 ， 会 触发 created 钩子 函数 。 在 created 钩子 函数 与 beforeMount 钩子 
函数 之 间 的 这 个 阶段 是 模板 编译 阶段 ， 这 个 阶段 在 不 同 的 构建 版 本 中 不 一 定 存在 。 挂 载 阶段 在 
beforeMount 钩子 函数 与 mounted 期 间 。 挂 载 完 毕 后 ，Vue.js 处 于 已 挂 载 阶段 。 已 挂 载 阶段 会 持续 
追踪 状态 的 变化 ， 当 数据 ( 状态 ) 发 生变 化 时 ，Watcher 会 通知 虚拟 DOM 重新 演 染 视图 。 在 演 
染 视 图 前 触发 beforeUpdate 钩子 困 数 , 泻 染 完毕 后 触发 updated 多 子 函数 。 当 vm.$destroy 被 调 
用 时 ， 组 件 进入 伸 载 阶段 。 件 载 前 会 触发 beforeDestroy 钩子 函数 ， 钊 载 后 会 触发 destroyed 
钩子 函数 。 


new Vue() 被 执行 后 ，Vuejs 进入 初始 化 阶段 ， 然 后 选择 性 进入 模板 编译 与 挂 载 阶段 。 


在 初始 化 阶段 ， 会 分 别 初始 化 实例 属性 、 事 件 、provide/inject 以 及 状态 等 ， 其 中 状态 又 
包含 props、methods 、data、computed 与 watch。 


指令 的 奥秘 


间 令 ( directive ) 是 Vuejs 提供 的 带 有 v- 前 绥 的 特殊 特性 。 指 令 属性 的 值 预期 是 单个 JavaScript 
表达 式 。 指 令 的 职责 是 ， 当 表达 式 的 值 改变 时 ， 将 其 产生 的 连带 影响 响应 式 地 作用 于 DOM。 

第 13 章 中 介绍 过 ，Vue.directive 全 局 API 可 以 创建 自 定义 指令 并 获取 全 局 指令 ,但 它 并 
不 能 让 指令 生效 ， 本 章 将 详细 介绍 自 定义 指令 是 如 何 生效 的 。 

除了 自 定义 指令 外 ，Vuejs 还 内 置 了 一 些 常 用 指令 ， 例 如 v-if 和 v-for 和 等。 有些 内 置 指令 
的 实现 原理 与 自 定 义 指令 不 同 ， 它 们 提供 的 功能 很 难 用 自 定义 指令 实现 。 


15.1 指令 原理 概述 


之 所 以 选择 在 本 章 介绍 指令 的 原理 ， 是 因为 指令 相关 的 知识 贯穿 Vue.js 内 部 各 个 核心 技术 
点 。 在 模板 解析 阶段 ， 我 们 在 将 指令 解析 到 AST， 然 后 使 用 AST 生成 代码 字符 串 的 过 程 中 实现 
某 些 内 置 指令 的 功能 ， 最 后 在 虚拟 DOM 演 染 的 过 程 中 触发 自 定义 指令 的 钧 子 函数 使 指令 生效 。 
图 15-1 给 出 了 让 指令 生效 的 全 过 程 。 在 模板 解析 阶段 ， 会 将 节点 上 的 指令 解析 出 来 并 添加 
到 AST 的 directives 属性 中 。 


代码 字符 串 
with(this){ 
模板 解析 { 代码 生成 etyon (11', { 
人 ee ta rawName: "Vv- 
< 模板 > | a yl -一 上 一 show",value: (true), 
type:1, : ] expression:"true"} 
} }, [_v("Berwin")]) 
执行 后 


虚拟 DOM - patch | 


视图 
触发 指令 钧 
了 函数 并 执行 指令 VNode 


15-1 指令 生效 过 程 
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随后 


一 个 节点 


最 后 ， 


序 会 监听 


directives 数据 会 传递 到 VNode 中 ， 接 着 就 可 以 通过 vnode.data.directives 获取 
所 绑 定 的 指令 。 

当 虚 拟 DOM 进行 修补 时 ， 会 根据 节点 的 对 比 结果 触发 一 些 钧 子 函 数 。 更 新 指令 的 程 
create update 和 destroy 钩子 困 数 ,并 在 这 三 个 钩子 函数 触发 时 对 VNode 和 oldVNode 


进行 对 比 ， 最 终 根据 对 比 结果 触发 指令 的 钧 子 函数 。( 使 用 自 定 义 指令 时 ， 可 以 监听 5 种 钩子 函 
数 : bind、inserted、update、componentUpdated 与 unbind。) 指令 的 钧 子 函 数 被 触发 后 ， 就 
说 明 指令 生效 了 。 
15.1.1 v-if 指令 的 原理 概述 

有 一 些 内 置 指令 是 在 模板 编译 阶段 实现 的 。 在 代码 生成 时 , 通过 生成 一 个 特殊 的 代码 字符 串 
来 实现 指令 的 功能 。 例 如 ， 在 模板 中 使 用 v-if 指令 

61 <li v-if="has">if</1i> 

02 «li v-else>else</1i> 

在 模板 编译 的 代码 生成 阶段 会 生成 这 样 的 代码 字符 串 : 

61 (has)?_c('1i',[_v("if")]):_c('li',[_v("else")]) 

为 了 方便 观察 ， 我 们 将 代码 字符 串 格式 化 : 

61 (has) 

82 ? _c('li',[_v("if")]) 

83 _c('li',[_v("else")]) 

这 样 一 段 代 码 字符 串 在 最 终 被 执行 时 ， 会 根据 has 变量 的 值 来 选择 创建 哪个 节点 。 

我 们 发 现 v-if 的 内 部 原理 其 实 和 自 定义 指令 不 一 样 。 
15.1.2 v-for 指令 的 原理 概述 

v-for 指令 也 是 在 模板 编译 的 代码 生成 阶段 实现 的 ， 例 如 下 面 的 模板 代码 : 

61 <li v-for="(item, index) in list">v-for {{index}}</1i> 

在 模板 编译 阶段 会 生成 这 样 的 代码 字符 串 : 

61 _1((list),function(item,index){return _c('li',[_v("v-for "+_s(index))])}) 

为 了 方便 观察 ,我们 将 代码 字符 串 格式 化 : 

@1 _1l((list), function (item, index) { 15 

62 return _c('li', [ 

83 _v("v-for " + _s(index)) 

@4 ]) 

e5 }) 
其 中 ，_1 是 函数 renderList 的 别名 。 当 执行 这 段 代码 字符 串 时 ，_1 函数 会 循环 变量 1ist 并 依 


次 调用 第 


二 个 参数 所 传递 的 函数 。 同 时 ， 会 传递 两 个 参数 : item 和 index。 此 外 ， 当 _c 函数 被 


244 第 15 章 ”指令 的 奥秘 


调用 时 ， 会 执行 _v 函数 创建 一 个 文本 节点 。 


可 以 发 现 ，v-for 指令 的 实现 原理 和 自 定义 指令 也 不 一 样 。 那么， 自 定义 指令 具体 是 如 何 实 
现 的 呢 ? 


15.1.3 v-on 指令 


v-on 指令 的 作用 是 绑 定 事件 监听 固 ， 事 件 类 型 由 参数 指定 。 它 用 在 普通 元 素 上 时 ， 可 以 监 
听 原 生 DOM 事件 ; 用 在 自 定 义 元 素 组 件 上 时 ， 可 以 监听 子 组 件 触发 的 自 定 义 事件 。 


我 们 在 14.5 节 中 详细 介绍 了 v-on 指令 用 在 自 定 义 元 素 组 件 上 时 ,内 部 如 何 监听 子 组 件 触发 
的 自 定义 事件 。 本 节 中 ， 我 们 主要 介绍 v-on 用 在 普通 元 素 上 时 内 部 如 何 监 听 原 生 DOM 事件 。 


从 模板 解析 到 生成 VNode， 最 终 事件 会 被 保存 在 VNode 中 ， 然 后 可 以 通过 vnode.data.on 
得 到 一 个 节点 注册 的 所 有 事件 。 

例如 ， 在 模板 中 注册 一 个 点 击 事件 : 

61 <xbutton v-on:click="doThat"> 我 是 按钮 </button> 


在 最 终生 成 的 VNode 中 ， 我 们 可 以 通过 vnode.data.on 读 出 下 面 的 事件 对 象 : 


61 { 
62 click: function () {} 
63 } 


虚拟 DOM 在 修补 (patch ) 的 过 程 中 会 根据 不 同 的 时 机 触发 不 同 的 钩子 函数 ，15.3 节 给 出 了 
修补 过 程 中 会 触发 的 全 部 钧 子 函 数 以 及 每 个 钧 子 函 数 的 触发 时 机 。 


事件 绑 定 相关 的 处 理 逻 辑 分 别 设置 了 create 与 update 钩子 函数 ， 也 就 是 说 在 修补 的 过 程 
中 ， 每 当 一 个 DOM 元 素 被 创建 或 更 新 时 ， 都 会 触发 事件 绑 定 相关 的 处 理 逻 辑 。 


事件 绑 定 相 关 的 处 理 逻 辑 是 一 个 叫 updateDOMListeners 的 国 数 ， 而 create 与 update 钓 
子 函 数 执行 的 都 是 这 个 函数 。 其 代码 如 下 : 


91 let target 
62 function updateDOMListeners (oldVnode, vnode) { 


03 if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) { 
64 return 

65 } 

66 const on = vnode.data.on || {} 

67 const oldon = oldVnode.data.on || {} 

68 target = vnode.elm 

69 normalizeEvents(on) 

16 updateListeners(on, oldOon, add, remove, vnode.context) 

11 target = undefined 

12 } 


明 


这 个 函数 接收 两 个 参数 : oldvnode 与 vnode。 我 们 可 以 通过 对 比 两 个 VNode 中 的 
来 决定 绑 定 原生 DOM 事件 还 是 解 绑 原 生 DOM 事件 。 


事件 对 象 ， 
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接 下 来 进行 判断 : 如 果 两 个 vNode 中 的 事件 对 象 都 不 存在 ， 说 明 上 一 次 没有 绑 定 任何 事件 ， 
这 一 次 元 素 更 新 也 没有 新 增 事 件 绑 定 ， 因 此 并 不 需要 进行 事件 的 绑 定 与 解 绑 ， 直 接 使 用 return 
语句 终止 函数 继续 执行 即 可 。 

随后 声明 了 两 个 变量 on 与 oldon, 前 者 是 新 虚拟 节点 上 的 事件 对 象 , 后 者 是 旧 虚 拟 节点 上 的 
事件 对 象 。 接 着 将 target 变量 设置 为 vnode .elm，vnode.elm 保存 vnode 所 对 应 的 DOM 元素。 

接着 调用 normalizeEvents 函数 ， 它 可 以 对 特殊 情况 下 的 事件 对 象 做 一 些 特殊 处 理 。 

然后 调用 updateListeners 方法 更 新 事件 监听 器 。 该 方法 的 作用 是 对 比 on 与 oldon， 然 后 根 
据 对 比 结果 调用 add 方法 或 remove 方法 执行 对 应 的 绑 定 事件 或 解 绑 事 件 等 ， 详 情 可 参见 14.5 节 。 

那么 ，add 和 remove 方法 是 如 何 绑 定 与 解 绑 DOM 原生 事件 的 呢 ? 

浏览 器 提供 了 一 个 绑 定 事件 的 API， 叫 作 node.addEventListener， 我 相信 大 家 都 不 陌生 。 


add 方法 的 代码 如 下 : 
61 function add (event, handler, once, capture, passive) { 
62 handler = withMacroTask(handler) 
83 if (once) handler = createOnceHandler(handler, event, capture) 
84 target.addEventListener( 
65 event， 
86 handler， 
87 supportsPassive 
88 ? { capture, passive } 
69 : capture 
16 ) 
11 } 


可 以 看 到 , 这 里 只 是 调用 了 浏览 器 提供 的 API, node.addEventListener 将 指定 的 监听 器 注 
册 到 target 上 ， 而 target 就 是 使 用 了 v-on 的 DOM 元 素 。 

值得 注意 的 是 ， 事 件 监听 器 使 用 withMacroTask 包 了 一 层 ， 并 且 如 果 v-on 使 用 了 once 修 
饰 符 ， 那 么 会 使 用 高 阶 函 数 create0nceHandler 实现 once 的 功能 。 

withMacroTask 函数 的 作用 是 给 回调 函数 做 一 层 包 装 ， 当 事件 触发 时 ,如果 因为 回调 中 修改 
了 数据 而 触发 更 新 DOM 的 操作 , 那么 该 更 新 操作 会 被 推送 到 宏 任 务 ( macrotask ) 的 任务 队列 中 。 
关于 withMacroTask 更 详细 的 内 容 ， 可 以 回 看 13.3.3 节 。 

前 面 说 过 ，createOnceHandler 函数 可 以 实现 once 的 功能 ,那么 它 是 如 何 做 到 的 呢 ? 其 代 
人 码 如 下 : 


61 function createOnceHandler (handler, event, capture) { 
62 const _target = target // 在 闭 包 中 保存 当前 目标 元 素 


83 return function onceHandler () { 

84 const res = handler.apply(null, arguments) 

685 if (res !== null) { 

686 remove(event, onceHandler, capture, _target) 
67 } 

08 } 


69 } 
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可 以 看 到 , 这 个 函数 就 是 一 个 普通 的 once 实现 。 执行 该 函数 后 , 会 返回 函数 onceHandler。 
当 执行 onceHandler 时 , 会 执行 handler 函数 ,并 执行 remove 函数 来 解 绑 事件 ,使 事件 只 能 
执行 一 次 。 

但 是 我 们 看 到 , 解 绑 事件 的 操作 被 放 在 了 if 判断 里 面 , 只 有 函数 的 返回 值 不 是 null 的 时 候 
解 绑 。 也 就 是 说 ， 如 果 handler 的 返回 值 是 nul1， 则 不 会 解 贿 。Vue.js 内 部 为 了 解决 一 个 bug， 
所 以 新 增 了 上 面 这 样 一 个 判断 。 


说 明 可 以 查看 Vue.js 在 GitHub 上 的 issue， 了 解 这 个 bug 的 详情 : https://github.com/vuejs/vue/ 
issues/4846。 


remove 方法 比 add 方法 简单 , 它 只 需要 调用 浏览 器 提供 的 removeEventListener 方法 将 事 
件 解 绑 即 可 ， 其 代码 如 下 ; 


91 function remove (event，handler，capture，_target) { 


62 (_target || target) .removeEventListener( 
63 event， 

64 handler. withTask || handler， 

65 capture 

66 ) 

67 } 


可 以 看 到 ， 这 里 只 调用 了 removeEventListener 解除 事件 监听 器 的 绑 定 。 但 是 有 一 个 细节 
需要 注意 ， 事 件 监听 器 首先 进行 判断 ， 如 果 handler._withTask 存在 ， 则 解 绑 handler. 
_wWithTask。 这 是 因为 在 绑 定 事件 时 经 过 了 withMacroTask 的 处 理 , 最 终 被 绑 定 的 事件 监听 器 其 
实 是 handler. withTask ， 所 以 解 绑 时 也 需要 解 绑 handler. withTask ， 只 有 handler. 
_withTask 不 存在 时 才 解 绑 handler。 


15.2” 自 定义 指令 的 内 部 原理 


在 第 二 篇 中 ， 我 们 详细 介绍 了 虚拟 DOM 的 实现 原理 。 我 们 知道 ， 虚 拟 DOM 通过 算法 对 比 
两 个 VNode 之 间 的 差异 并 更 新 真实 的 DOM 节点 。 在 更 新 真实 的 DOM 节点 时 ， 有 可 能 是 创建 新 
的 节点 ， 或 者 更 新 一 个 已 有 的 节点 ， 还 有 可 能 是 删除 一 个 节点 等 。 虚 拟 DOM 在 演 染 时 ,除了 更 
新 DOM 内 容 外 ， 还 会 触发 钩子 函数 。 例 如 ， 在 更 新 节点 时 ， 除 了 更 新 节点 的 内 容 外 ， 还 会 触发 
update 钩子 函数 。 这 是 因为 标签 上 通常 会 绑 定 一 些 指 令 、 事 件 或 属性 ， 这 些 内 容 也 需要 在 更 新 
节点 时 同步 被 更 新 。 因 此 , 事件、 指令 、 属 性 等 相关 处 理 逻 辑 只 需要 监听 钧 子 函 数 ， 在 钩子 函数 
触发 时 执行 相关 处 理 逻 辑 即 可 实现 功能 。 

指令 的 处 理 逻 辑 分 别 监听 了 create 、update 与 destroy， 其 代码 如 下 : 


91 export default { 
02 create: updateDirectives， 
93 update: updateDirectives, 
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84 
85 
86 
87 


destroy: function unbindDirectives (vnode) { 
updateDirectives(vnode, emptyNode) 


} 
j 


虚拟 DOM 在 触发 钧 子 函 数 时 ， 上 面 代码 中 对 应 的 函数 会 被 执行 。 但 无 论 哪个 钓 子 孔 数 被 触 
发 ， 最 终 都 会 执行 一 个 叫 作 updateDirectives 的 函数 。 从 代码 中 可 以 得 知 ， 指 令 相 关 的 处 理 逻 
辑 都 在 updateDirectives 函数 中 实现 ， 该 函数 的 代码 如 下 : 


61 
02 
93 
094 
85 


function updateDirectives (oldVnode, vnode) { 
if (oldVnode.data.directives || vnode.data.directives) { 
_update(oldVnode, vnode) 


} 
} 


可 以 看 到 , 不论 oldVnode 还 是 vnode， 只 要 其 中 有 一 个 虚拟 节点 存在 directives, 那么 就 
执行 _update 函数 处 理 指令 。 


说 明 在 模板 解析 时 ，directives 会 从 模板 的 属性 中 解析 出 来 并 最 终 设置 到 VNode 中 。 


_update 隐 数 的 代码 如 下 : 

61 function update (oldVnode, vnode) { 

02 const isCreate = oldVnode === emptyNode 

83 const isDestroy = vnode === emptyNode 

64 const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context) 
@5 const newDirs = normalizeDirectives(vnode.data.directives, vnode.context) 
66 

87 const dirsWithInsert = [] 

88 const dirsWithPostpatch = [] 

99 

16 let key, oldDir, dir 

11 for (key in newDirs) { 

12 oldDir = oldDirs[key] 

13 dir = newDirs[key] 

14 if (loldDir) { 

15 // 新 指令 ,触发 bind 

16 callHook(dir, 'bind', vnode, oldVnode) 
17 if (dir.def && dir.def.inserted) { 

18 dirsWithInsert.push(dir) 

19 } 

26 } else { 

21 // 指令 已 和 存在， 触发 update 

22 dir.oldValue = oldDir.value 

23 callHook(dir, 'update', vnode, oldVnode) 
24 if (dir.def && dir.def.componentUpdated) { 
25 dirswithPostpatch.push(dir) 

26 } 

27 } 

28 } 

29 

36 if (dirswithInsert.length) { 
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31 const callInsert = () => { 

32 for (let i = 6; i < dirswithInsert.length; i++) { 

33 callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode) 
34 } 

35 } 

36 if (isCreate) { 

37 mergeVNodeHook(vnode, 'insert', callInsert) 

38 } else { 

39 callInsert() 

46 } 

41 } 

42 

43 if (dirswWwithpostpatch.length) { 

44 mergeVNodeHook(vnode, 'postpatch', () => { 

45 for (let i = 6; i < dirsWithpostpatch.length; i++) { 

46 callHook(dirsWithpostpatch[i], 'componentUpdated', vnode, oldVnode) 
47 } 

48 }) 

49 } 

56 

51 if (!isCreate) { 

52 for (key in oldDirs) { 

53 if (!newDirs[key]) { 

54 // 指令 不 再 存在 ， 触 发 unbind 

55 callHook(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy) 
56 } 

57 } 

58 } 

59 } 


dirsNithPostpatch， 其 作用 如 下 所 示 。 


D iscreate: 判断 虚拟 节点 是 否 是 一 个 新 创建 的 节点 。 

口 isDestroy: 当 新 虚拟 节点 不 存在 而 旧 虚 拟 节点 存在 时 为 真 。 

口 oldDirs: 旧 的 指令 集合 ， 指 oldvnode 中 保存 的 指令 。 

D newDirs: 新 的 指令 集合 ， 指 vnode 中 保存 的 指令 。 

口 dirsWithInsert: 其 中 保存 需要 触发 inserted 指令 钩子 函数 的 指令 列表 。 

口 dirsNithPostpatch: 其 中 保存 需要 触发 componentUpdated 钧 子 函 数 的 指令 列表 。 


这 里 通过 normalizeDirectives 函数 将 模板 中 使 用 的 指令 从 用 户 注册 的 自 定义 指令 
取出 来 ， 最 终 取 到 的 值 为 : 


这 里 先 声 明了 6 个 变量 ijsCreate、isDestroy、oldDirs、newDirs、dirsWithInsert 与 


Ly 


合 中 


61 1{ 

82 v-focus: { 

03 def: {inserted: f}, 
@4 modifiers: {}, 

@5 name: "focus", 

66 rawName: "v-focus" 
67 } 


68 } 
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自 定义 指令 的 代码 为 : 

61 Vue.directive('focus', { 
62 inserted: function (el) { 
03 el.focus() 

04 } 

e5 }) 


取 到 oldDirs 与 newDirs 之 后 ,下 一 步 要 做 的 事情 是 对 比 这 两 个 指令 集合 并 触发 对 应 的 指 
令 钓 子 函 数 。 代 码 中 使 用 for-in 语句 循环 newDirs， 并 在 循环 体 中 分 别 从 oldDirs 和 newDirs 
获取 指令 保存 到 变量 oldDir 和 dir 中 。 


然后 判断 oldDir 是 否 存在 。 如 果 不 存在 ， 说 明 当 前 循环 到 的 指令 是 首次 绑 定 到 元 素 ， 此 时 
调用 callHook 触发 指令 中 的 bind 函数 ( 其 实 就 是 触发 了 指令 的 bind 钩子 函数 ) 即 可 。callHook 
的 作用 是 找 出 指令 中 对 应 钧 子 函 数 名 称 的 方法 ， 如 果 该 方法 存在 ， 则 执行 它 。 接 下 来 进行 判断 ， 
如 果 该 指令 在 注册 时 设置 了 inserted 方法 ,那么 将 指令 添加 到 dirswithInsert 中 ， 这 样 做 可 
以 保证 执行 完 所 有 指令 的 bind 方法 后 再 执行 指令 的 inserted 方法 。 

当 oldDpir 存在 时 , 说 明 指令 之 前 已 经 绑 定 过 了 , 那么 这 一 次 的 操作 应 该 是 更 新 指令 。 首先， 
在 dir 上 添加 oldvalue 属性 并 在 其 中 保存 上 一 次 指令 的 value 属性 值 。 随 后 调用 callHook 函 
数 触 发 指令 的 update 钩子 图 数 ( callHook 内 部 其 实 是 执行 了 指令 的 update 方法 )。 然 后 判断 
注册 自 定义 指令 时 ， 该 指令 是 否 设置 了 componentUpdated 方法 。 如 果 设 置 了 ， 则 将 该 指令 添加 
到 dirsWithPostpatch 列表 中 。 这 样 做 的 目的 是 让 指令 所 在 组 件 的 VNode 及 其 子 VNode 全 部 更 
新 后 ， 再 调用 指令 的 componentUpdated 方法 。 


最 后 ， 判 断 dirswithInsert 列表 中 是 否 有 元 素 。 如 果 有 ， 则 循环 dirswithInsert 依次 调 
用 callHook 执行 每 一 个 指令 的 inserted 钩子 函数 。 从 代码 中 可 以 看 到 ， 我 们 创建 了 一 个 函数 
callInsert， 当 这 个 函数 执行 时 ， 才 会 循环 dirsNithInsert 依次 调用 每 一 个 指令 的 inserted 
钩子 函数 ， 这 样 做 其 实 是 为 了 让 指令 的 inserted 方法 在 被 绑 定 元 素 插 人 到 父 节点 后 再 调用 。 

虚拟 DOM 在 对 比 与 浑 染 时 ， 会 触发 不 同 的 钩子 函数 。 当 使 用 虚拟 节点 创建 一 个 真实 的 DOM 
节点 时 , 会 触发 create 钩子 遇 数 ; 当 这 个 DOM 节点 被 插入 到 父 节 点 时 , 会 触发 insert 钩子 函数 。 

mergeVNodeHook 可 以 将 一 个 钧 子 函 数 与 虚拟 节点 现 有 的 钩子 函数 合并 在 一 起 ， 这 样 当 虚拟 
DOM 触发 钩子 函数 时 ， 新 增 的 钩子 函数 也 会 被 执行 。 所 以 代码 中 使 用 iscreate 判断 虚拟 节点 
是 否 为 一 个 新 创建 的 节点 ， 如 果 是 ， 那 么 应 该 等 到 元 素 被 插入 到 父 节 点 之 后 再 执行 指令 的 
inserted 方法 。 这 里 使 用 mergeVNodeHook 将 callInsert 添加 到 虚拟 节点 的 Insert 钩子 函数 
列表 中 , 这 样 可 以 将 钧 子 函 数 的 执行 推迟 到 被 绑 定 的 元 素 插 和 人 到 父 节 点 之 后 进行 。 如 果 isCreate 
不 为 真 ， 那 么 不 需要 将 执行 指令 的 操作 推迟 到 元 素 被 插入 到 父 节点 之 后 ， 直 接 执行 callInsert 
执行 指令 的 inserted 方法 即 可 。 

随后 与 inserted 钩子 图 数 相 同 ，componentUpdated 也 需要 将 指令 推迟 到 指令 所 在 组 件 的 
VNode 及 其 子 VNode 全 部 更 新 后 调用 。 虚 拟 DOM 会 在 元 素 更 新 前 触发 prepatch 钩子 函数 ， 正 
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在 更 新 元 素 时 中 会 触发 update 钩子 函数 ， 更 新 后 会 触发 postpatch 钩子 函数 。 因 此 ， 指 令 的 
componentUpdated 和 需要 使 用 mergeVNodeHook 在 postpatch 钩子 函数 列表 中 新 增 一 个 钧 子孙 数 ， 
当 钧 子 困 数 被 执行 时 再 去 执行 指令 的 componentUpdated 方法 。 


现在 只 有 指令 的 unbind 钩子 函数 的 执行 时 机 没有 介绍 。unbind 在 指令 与 元 素 解 绑 时 执行 。 
那么 ， 指 令 什么 时 候 与 元 素 解 绑 呢 ? 其 实 道理 和 虚拟 DOM 的 比 对 原理 类 似 ， 我 们 只 需要 循环 旧 
的 指令 列表 ，, 找 出 哪个 指令 在 新 的 指令 列表 中 不 存在 ,就 说 明 这 个 指令 是 被 废弃 的 ， 此 时 执行 该 
指令 的 unbind 方法 即 可 。 代码 中 先 使 用 iscreate 判断 当前 虚拟 节点 是 否 为 新 创建 的 ， 如果 是 ， 
则 不 需要 解 绑 。 接 着 使 用 for-in 语句 循环 旧 的 指令 列表 oldDirs， 然 后 使 用 oldDirs 中 的 key 
查看 它 在 newDirs 中 是 否 存在 , 不 存在 则 说 明 这 个 指令 在 旧 虚 拟 节点 的 指令 列表 中 存在 , 但 在 这 
虚拟 节点 的 指令 列表 中 不 存在 ， 此 时 调用 callHook 执行 指令 的 unbind 方法 即 可 。 


最 后 ， 介 绍 一 下 callHook 函数 是 如 何 执行 指令 的 钩子 函 数 的 ， 其 代码 如 下 : 


91 function callHook (dir, hook, vnode, oldVnode, isDestroy) { 


02 const fn = dir.def && dir.def[hook] 

63 if (fn) { 

64 try { 

65 fn(vnode.elm, dir, vnode, oldVnode, isDestroy) 

66 } catch (e) { 

67 handleError(e, vnode.context, ‘directive ${dir.name} ${hook} hook  ) 
68 } 

69 } 

10 } 


该 函数 接收 5 个 参数 : dir、hook、vnode、oldVnode 和 isDestroy， 它 们 的 含义 如 下 。 
口 dir: 指令 对 象 。 
口 hook: 将 要 触发 的 钩子 函数 名 。 
口 vnode: 新 虚拟 节点 。 
口 oldVnode: 旧 虚 拟 节 点 。 
口 isDestroy: 当 新 虚拟 节点 不 存在 而 旧 虚 拟 节 点 存在 时 为 真 。 
该 函数 先 从 指令 对 象 中 取出 对 应 的 钧 子 函 数 ， 随 后 判断 钧 子 函 数 是 否 存在 。 如 果 存 在 ， 则 执 
行 它 并 传递 一 些 参数 ， 同 时 使 用 try.. .catch 语句 捕获 钧 子 函 数 在 执行 时 可 能 会 抛 出 的 错误 。 
如 果 抛 出 了 错误 ， 则 调用 handleError 进入 错误 处 理 相关 的 逻辑 。 
关于 错误 处 理 的 内 容 ， 请 查看 14.3 节 。 


15.3 ”虚拟 DOM 钧 子 函 数 
表 15-1 给 出 了 虚拟 DOM 在 泻 染 时 会 触发 的 所 有 钩子 函数 以 及 每 个 钧 子 限 数 的 触发 时 机 。 


表 15-1 虚拟 DOM 在 渲染 时 会 触发 的 所 有 钩子 函数 及 其 触发 时 机 


名 称 触发 时 机 回调 参数 
init 已 添加 vnode， 在 修补 期 间 发 现 新 的 虚拟 节点 时 被 触发 vnode 
create 已 经 基于 VNode 创建 了 DOM 元 素 emptyNode 和 vnode 
activate keepAlive 组 件 被 创建 emptyNode 和 innerNode 
insert ”一 日 vode 对 应 的 DOM 元 素 被 插入 到 视图 中 并 上 且 修补 周期 的 其 余部 分 已 。 vnode 

经 完成 ， 就 会 触发 
prepatch 一 个 元 素 即 将 被 修补 oldvnode 和 vnode 
update 一 个 元 素 正在 被 更 新 oldvnode 和 vnode 
postpatch ”一 个 元 素 已 经 被 修补 oldVnode 和 vnode 


destroy 它 的 DOM 元 素 从 DOM 中 移 除 时 或 者 它 的 父 元 素 从 DOM 中 移 除 时 触发 。 vnode 

remove vnode 对 应 的 DOM 元 素 从 DOM 中 被 移 除 时 触发 此 钩子 函数 。 需 要 说 明 的 vnode 和 removeCallback 
是 ， 只 有 一 个 元 素 从 父 元 素 中 被 移 除 时 会 触发 , 但 是 如 果 它 是 被 移 除 的 元 
素 的 子 项 ， 则 不 会 触发 


15.4 总 结 


本 章 详 细 介绍 了 自 定义 指令 是 如 何 生效 的 ， 首 先 ， 简 单 介绍 了 内 置 指令 v-if 与 v-for 的 原 
理 ， 接 着 详细 解释 了 v-on 指令 用 在 普通 元 素 上 时 内 部 如 何 监 听 原 生 DOM 事件 ， 最 后 讨论 了 虚 
拟 DOM 在 修补 过 程 中 会 触发 的 全 部 钧 子 函 数 以 及 每 个 钧 子 函 数 的 触发 时 机 。 


hl 
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过 滤器 的 奥秘 


我 们 相信 大 家 对 Vuejs 中 的 过 滤器 并 不 陌生 , 但 过 滤器 内 部 是 如 何 运行 的 呢 , 本章 将 揭秘 过 


滤 需 内 部 的 
档 上 的 介 


奥秘 。 
寺 滤 带 内 部 的 运行 原理 之 前 , 我 们 先 简单 回顾 下 如 何 使 用 过 


滤器 。 以 下 内 容 是 官方 文 


Vuejs 允许 我 们 自 定 义 过 滤器 来 格式 化 文本 。 它 可 以 用 在 两 个 地 方 : 双 花 括号 捕 值 和 v-bind 
表达 式 (后 者 从 2.1.0+ 开始 支持 ) 它 应 该 被 添加 在 JavaScript 表达 式 的 尾部 , 由 “管道 ”符号 指示 : 


-- 在 双 花 括号 中 --> 


62 {{ message | capitalize }} 


el <! 
03 
64 <! 


-- 在 v-bind 中 --> 


65 <div v-bind:id="rawId | formatId"></div> 


我 们 可 以 在 一 个 组 件 的 选项 中 定义 本 地 的 过 滤器 : 


el filters: { 


67 } 


capitalize: function (value) { 
if (!value) return '"' 
value = value.toString() 
return value.charAt(8).toUpperCase() + value.slice(1) 


} 


或 者 在 创建 Vue.js 实例 之 前 全 局 定义 过 滤器 : 


61 Vue.filter('capitalize', function (value) { 


65 }) 


if (!lvalue) return '' 
value = value.toString() 
return value.charAt(6).toUpperCase() + value.slice(1) 


67 new Vue({ 


869 }) 


过 滤器 函数 总 是 将 表达 式 的 值 (之 前 的 操作 链 的 结果 ) 作为 第 
capitalize 过 滤器 函数 会 将 收 到 的 message 的 值 作 为 第 一 个 参数 。 


一 个 参数 。 在 上 述 例子 中 ， 


16.1 过 滤器 原理 概述 253 


此 外 ， 过 滤器 可 以 串联 : 

61 {{ message | filterA | filterB }} 

在 这 个 例子 中 , filterA 被 定义 为 接收 单个 参数 的 过 滤器 函数 , 表达 式 message 的 值 将 作为 
参数 传人 到 filterA 过 滤器 函数 中 。 然 后 继续 调用 同样 被 定义 为 接收 单个 参数 的 过 滤器 函数 
filterB， 将 过 滤器 函数 filterA 的 执行 结果 当 作 参数 传递 给 filterB 哺 数 。 

过 滤器 是 JavaScript 函数 ， 因 此 可 以 接收 参数 : 

61 {{ message | filterA('arg1'，arg2) }} 

这 里 ，filterA 被 定义 为 接收 三 个 参数 的 过 滤器 函数 。 其 中 message 的 值 作为 第 一 个 参数 ， 
普通 字符 串 'arg1' 作为 第 二 个 参数 ， 表 达 式 arg2 的 值 作为 第 三 个 参数 。 


现在 我 们 已 经 简单 回顾 了 过 滤器 的 使 用 方式 ， 接 下 来 将 揭秘 过 滤器 内 部 的 奥秘 。 


16.1 过 滤器 原理 概述 
过 滤器 的 原理 并 不 复 休 ， 我 们 还 是 用 前 面 的 例子 举例 : 


61 {{ message | capitalize }} 
这 个 过 滤器 在 模板 编译 阶段 会 编译 成 下 面 的 样子 : 


61 _s(_f("capitalize")(message)) 


其 中 _f 函数 是 resolveFilter 的 别名 ， 其 作用 是 从 this .$options .filters 中 找 出 注册 的 过 

滤器 并 返回 ,因此 ,上 面 例子 中 的 _f("capitalize") 与 this.$options.filters['capitalize'] 

相同 。 而 this .$options .filters['capitalize'] 就 是 我 们 注册 的 capitalize 过 滤器 函数 : 
61 filters: { 


62 capitalize: function (value) { 

83 if (!value) return '' 

84 value = value.toString() 

85 return value.charAt(6) .toUpperCase() + value.slice(1) 
86 } 

67 } 


因此 ，_f("capitalize")(message) 其 实 就 是 执行 了 过 滤器 capitalize 并 传递 了 参数 


message。 

我 们 相信 大 家 对 _s 函数 不 陌生 ， 第 9 章 中 介绍 过 ， 它 是 tostring 函数 的 别名 。tostring 
函数 的 代码 如 下 : 

61 function toString (val) { 

82 return val == null 

64 : typeof val === 'object’ 

85 ? JSON.stringify(val, null, 2) 

66 : String(val) 
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简单 来 说 ， 其 实 就 是 执行 了 capitalize 过 滤器 函数 并 把 message 当 作 参数 传递 进去 , 接着 
将 capitalize 过 滤器 处 理 后 的 结果 当 作 参数 传递 给 tostring 困 数 。 最 终 tostring 函数 执行 后 
的 结果 会 保存 到 VNode 中 的 text 属性 中 。 换 句 话说， 这 个 返回 结果 直接 被 拿 去 泻 染 视图 了 。 


16.1.1 串联 过 滤器 
前 面 介 绍 了 过 滤器 可 以 串联 ， 例 如 : 


61 {{ message | capitalize | suffix }} 


我 们 定义 的 本 地 过 滤器 如 下 : 


61 filters: { 


62 capitalize: function (value) { 

@3 if (!value) return '" 

84 value = value.toString() 

85 return value.charAt(6) .toUpperCase() + value.slice(1) 
66 }， 

67 suffix: function (value, symbol = '~') { 

68 if (!value) return '" 

69 return Value + Symbol 

16 } 

11 } 


最 终 在 模板 编译 阶段 会 编译 成 下 面 的 样子 : 

61 _s(_f("suffix")(_f("capitalize")(message))) 

从 代码 中 可 以 看 出 ,表达 式 message 的 值 将 作为 参数 传人 到 capitalize 过 滤 右 函数 中 ， 而 
capitalize 过 滤器 的 返回 结果 通过 参数 传递 给 了 suffix 过 滤器 , 也 就 是 说 capitalize 过 滤器 
的 输出 是 suffix 过 滤器 的 输入 。 

图 16-1 给 出 了 编译 后 的 串联 过 滤器 图 ， 它 非常 清晰 地 展示 了 过 滤器 的 串联 过 程 。 


suffix 过 滤器 | 
_s(_f("suffix")(_f("capitalize")(message))) 


apitalize 过 滤器 
图 16-1 编译 后 的 串联 过 滤器 
最 终 演 染 出 来 的 文本 的 首 字母 大 写 并 日 最 后 携带 ~ 后 级 。 


16.1.2 ”滤器 接收 参数 
前 面 介绍 过 滤器 还 可 以 接收 参数 ， 例 如 : 


61 {{message|capitalize|suffix('!')}} 
设置 了 参数 的 过 滤器 最 终 被 编译 后 变 成 这 样 : 


61 _s(_f("suffix")(_f("capitalize")(message),'!')) 


nN 
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可 以 看 到 ,加 了 参数 的 过 滤器 与 不 加 参数 的 过 滤器 之 间 的 唯一 区 别 就 是 , 当 模板 被 编译 之 后 ， 
将 在 模板 中 给 过 滤 需 设置 的 参数 添加 在 过 滤器 函数 的 参数 中 。 注意 : 这 里 是 从 第 二 个 参数 开始 ， 
是 因为 第 一 个 参数 永远 都 是 之 前 操作 链 的 结果 。 

16-2 给 出 了 接收 参数 的 过 滤器 与 不 接收 参数 的 过 滤器 之 间 的 区 别 。 


Ca 


suffix 过 滤器 i 
_s(_ f("suffix")( _f("capitalize")(message,'!',))) 


capitalize 过 滤器 
参数 


图 16-2 ”接收 参数 的 suffix 过 滤器 与 不 接收 参数 的 capitalize 过 滤器 


16.1.3 ”resolveFilter 的 内 部 原理 


现在 我 们 已 经 大 致 了 解 了 过 滤器 是 如 何 运行 的 ， 但 是 还 不 清楚 _f 函数 是 如 何 找到 过 滤器 的 。 
函数 是 resolveFilter 少数 的 别名 。resolveFilter 函数 的 代码 如 下 : 


61 import { identity, resolveAsset } from “core/util/index' 


02 

63 export function resolveFilter (id) { 

84 return resolveAsset(this.$options, 'filters', id, true) || identity 
e5 } 


可 以 看 到 , 它 只 有 一 行 代 码 。 调 用 该 函数 查找 过 滤器 ， 如 果 找 到 了 ， 则 将 过 滤器 返回 ; 如 果 
找 不 到 ， 则 返回 identity。identity 函数 的 代码 如 下 : 


01 /** 
62 * 返回 相同 的 值 

03 */ 

94 export const identity = _ => _ 


该 函数 会 返回 同 参 数 相 同 的 值 。 
现在 我 们 比较 关心 resolveAsset 水 数 如 何 查 找 过 滤器 ， 其 代码 如 下 : 


61 export function resolveAsset (options, type, id, warnMissing) { 


02 if (typeof id !== 'string') { 

63 return 

64 } 

685 const assets = options[type] 

686 // 先 检查 本 地 注册 的 变动 

87 if (hasOwn(assets, id)) return assets[id] 

88 const camelizedId = camelize(id) 

89 if (hasOwn(assets, camelizedId)) return assets[camelizedId] 

16 const PascalCaseId = capitalize(camelizedId) 

11 if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId] 

12 // 检查 原型 链 

13 const res = assets[id] || assets[camelizedId] || assets[PascalCaseId] 
14 if (process.env.NODE_ENV !== "production' && warnMissing && !res) { 


15 warn( 
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16 "Failed to resolve ' + type.slice(6，-1) + ': ' + id, 
17 options 

18 ) 

19 } 

26 return res 

21 } 


这 里 首先 判断 参数 id 的 类 型 ( 它 是 过 滤器 id )， 它 必须 是 字符 串 类 型 ， 如 果 不 是 ， 则 使 用 
return 语句 终止 函数 继续 执行 。 

随后 声明 变量 assets 并 将 options[type] 保存 到 该 变量 中 。 事 实 上 ，resolveAsset 冰 数 
除了 可 以 查找 过 滤器 外 ， 还 可 以 查找 组 件 和 指令 。 本 例 中 变量 assets 中 保存 的 是 过 滤器 集合 。 
然后 通过 hasown 也 数 检查 assets 自身 是 否 存在 id 属性 ， 如 果 存 在 ， 则 直接 返回 结果 。hasOwn 
函数 基于 0bject.prototype.hasownProperty 实现 。 如 果 不 存在 ， 则 使 用 函数 camelize 将 id 
驼峰 化 之 后 再 检查 assets 身上 是 否 存 在 将 id 驼 峰 化 之 后 的 属性 。 如 果 驼 峰 化 后 的 属性 也 不 存 
在 , 那么 使 用 capitalize 函数 将 id 的 首 字母 大 写 后 再 次 检查 assets 中 是 否 存在 ， 如 果 还 是 找 
不 到 ， 那 么 按照 前 面 的 顺序 重新 查找 一 遍 属性 ， 不 同 的 是 这 次 将 检查 原型 链 。 

查找 原型 链 很 简单 :只 需要 访问 属性 即 可 。 如 果 找 到 ， 则 返回 过 滤器 。 如 果 找 不 到 ， 那么 在 
非 生产 环境 下 在 控制 台 打 印 警告 。 最 后 ， 无 论 是 否 找到 ， 都 返回 查找 结果 。 

注册 过 滤器 有 两 种 途径 : 注册 全 局 过 滤器 和 在 组 件 的 选项 中 定义 本 地 的 过 滤 需 。 在 13.4.6 节 
中 我 们 介绍 过 ， 全 局 注册 的 过 滤器 会 保存 在 Vue 构造 函数 中 。 

而 resolveAsset 水 数 在 查找 过 滤器 的 过 程 中 并 没有 去 Vue 构造 函数 中 搜索 过 滤器 。 这 是 因为 
在 初始 化 Vue.jjs 实例 时 , 把 全 局 过 滤器 与 组 件 内 注册 的 过 滤器 合并 到 this .$options.filters 中 
了 , 而 this .$options.filters 其 实 同时 保存 了 全 局 过 滤器 和 组 件 内 注册 的 过 滤器 。resolveAsset 
只 需要 从 this.$options.filters 中 查找 过 滤器 即 可 。 


16.2 解析 过 滤器 


现在 我 们 已 经 了 解 了 过 滤器 内 部 是 如 何 执行 的 , 但 是 并 不 了 解 模板 中 的 过 滤器 语法 是 如 何 编 
译 成 过 滤器 函数 来 调用 表达 式 的 。 例 如 下 面 的 过 滤 需 : 

61 {{ message | capitalize }} 

我 们 并 不 清楚 它 是 如 何 被 编译 成 下 面 这 个 样子 的 : 

61 _s(_f("capitalize")(message)) 

在 Vue.js 内 部 ，src/compiler/parser/filter-parser.js 文件 中 提供 了 一 个 parseFilters 国 数 ， 专 
门 用 来 解析 过 滤器 ， 它 可 以 将 模板 过 滤 顺 解析 成 过 滤 顺 函数 调用 表达 式 。 这 个 逻辑 并 不 复杂 , 我 
们 只 需要 在 解析 出 过 滤器 列表 后 ， 循 环 过 滤器 列表 并 拼接 一 个 字符 串 即 可 。 其 代码 如 下 : 


861 export function parseFilters (exp) { 
62 let filters = exp.split('|') 
03 let expression = filters.shift().trim() 


hl 


一 


16.2 ”解析 过 滤器 。 257 


94 let i 

685 if (filters) { 

66 for (i = 6;j i «< filters.length; i++) { 
87 expression = wrapFilter(expression, filters[i].trim()) 
68 } 

69 } 

106 

11 return expression 

12 } 

13 

14 function wrapFilter (exp, filter) { 

15 const i = filter.indexof('(') 

16 if (i < 6) { 

17 // _f: resolveFilter 

18 return ~_f("${filter}")(${exp}). 

19 } else { 

26 const name = filter.slice(86，i) 

21 const args = filter.slice(i + 1) 

22 return ~_f("${name}")(${exp},${args}. 
23 } 

24 } 

25 

26 // 测试 

27 


28 “parseFilters(`message | capitalize`) 
29 // _f("capitalize")(message) 


31 parseFilters(‘message | filterA | filterB`) 
32 // _f("filterB")(_f("filterA")(message)) 


34 parseFilters(‘message | filterA('arg1', arg2).) 
35 // _f("filterA")(message,'arg1', arg2) 


注意 在 真实 的 Vue.js 源码 中 多 了 很 多 边界 条 件 判 断 ， 所 以 代码 会 比 上 面 的 例子 稍微 复杂 一 点 。 


这 里 使 用 split 方法 将 模板 字符 串 切 割 成 过 滤器 列表 , 并 将 列表 中 的 第 一 个 元 素 赋 值 给 变量 
expression， 然 后 循环 过 滤器 列表 并 调用 wrapFilter 函数 拼接 字符 串 。wrapFilter 函数 接收 


两 个 参数 一 一 exp 和 filter， 其 含义 和 参数 类 型 如 表 16-1 所 示 。 
表 16-1 wrapFilter 函数 的 两 个 参数 的 含义 
参 数 含 义 参数 类 型 
exp 表达 式 String 
filter 过 滤器 String 


中 


代码 中 先 通过 indexof 判断 过 滤 需 字符 串 中 是 否 包 含 字符 (。 如 果 包 含 ， 说 明 过 滤器 携带 了 
其 他 参数 ; 如果 不 包含 ， 说 明 过 滤器 并 没有 传递 其 他 参数 。 
针对 不 包含 字符 (的 情况 , 参数 filter 就 是 过 滤器 ID, 所 以 只 需要 将 它 拼接 到 _f 函数 的 


WW 


258 第 16 章 过 滤器 的 奥秘 


数 并 将 exp 当 作 过 滤器 的 参数 拼接 到 一 起 即 可 。 

针对 包含 (的 情况 ， 需 要 先 从 参数 filter 中 将 过 滤器 名 和 过 滤器 参数 解析 出 来 ， 而 字符 (的 
左边 是 过 滤器 名 ， 右 边 是 参数 。 举 个 例子 : 

el filterA('arg1', arg2) 

如 果 参 数 filter 是 上 面 这 样 的 字符 串 , 那么 字符 (的 左边 为 过 滤器 名 filterA, 右边 是 参数 
“arg1' ，arg2)。 

可 以 看 到 ， 解 析出 来 的 参数 右边 多 了 一 个 小 括号 ) ， 所 以 在 接 下 来 拼接 字符 串 时 需要 去 掉 右 
边 的 小 括号 : 

61 return ._f("${name}")(${exp},${args} 


16.3 ”总 结 


使 用 Vuejs 开发 应 用 时 ， 过 滤器 是 一 个 很 常用 的 功能 ， 用 于 格式 化 文本 。 

首先 , 我 们 带 大 家 回顾 了 过 滤器 的 用 法 。 除 了 基本 的 使 用 方式 外 , 它 还 可 以 串联 并 且 接 收 参数 。 

过 滤 需 的 原理 是 : 在 编译 阶段 将 过 滤器 编译 成 函数 调用 , 串联 的 过 滤 带 编译 后 是 一 个 般 套 的 
函数 调用 ， 前 一 个 过 滤器 函数 的 执行 结果 是 后 一 个 过 滤器 函数 的 参数 。 
编译 后 的 _f 函数 是 resolveFilter 函数 的 别名 ,resolveFilter 函数 的 作用 是 找到 对 应 的 

最 后 , 介绍 了 在 模板 编译 过 程 中 过 滤器 是 如 何 被 编译 成 过 滤器 函数 调用 的 。 简 单 来 说 , 编译 
过 滤器 的 过 程 也 分 两 步 : 解析 和 拼接 字符 串 。 


外 


跋 


最 佳 


在 本 书 最 后 一 章 , 我 想 聊 聊 日 常 工作 中 使 用 Vuejs 开发 项 目 时 的 最 佳 实践 以 及 风格 规范 , 其 
中 总 结 了 平时 工作 中 的 一 些 经 验 、Vue.js 官方 推荐 的 最 佳 实践 以 及 风格 规范 。 


当然 ,风格 规范 中 的 内 容 不 能 保证 对 所 有 团队 或 工程 都 是 理想 的 。 但 可 取 的 方法 是 : 根据 过 
去 的 经 验 、 周 围 的 技术 栈 、 个 人 价值 观 ， 对 风格 做 出 有 意识 的 修改 。 

好 消息 是 ， 当 我 们 了 解 了 Vuejs 的 内 部 原理 之 后 ,对 于 一 些 推荐 的 最 佳 实践 , 我 们 也 能 更 好 
地 理解 它们 为 什么 好 ， 好 在 哪里 。 

在 项 目 中 使 用 统一 的 风格 规范 , 可 以 在 绝 大 多 数 工 程 中 改善 代码 的 可 读 性 和 工作 者 的 开发 体 
验 ， 同 时 可 以 回避 一 些 常见 的 错误 和 小 纠结 ， 避 免 一 些 反 模式 。 


17.1 为 列表 泻 染 设置 属性 key 
key 这 个 特殊 属性 主要 用 在 Vuejs 的 虚拟 DOM 算法 中 ， 在 对 比 新 旧 虚 拟 节点 时 辨识 虚拟 节点 。 


我 们 在 介绍 虚拟 DOM 时 提 到 ， 在 更 新 子 节点 时 ,需要 从 旧 虚 拟 节 点 列表 中 查找 与 新 虚拟 节 
点 相同 的 节点 进行 更 新 。 如 果 这 个 查找 过 程 设置 了 属性 key， 那么 查找 速度 会 快 很 多 。 所 以 无 论 
何 时 ， 建 议 大 家 尽 可 能 地 在 使 用 v-for 时 提供 key， 除 非 遍 历 输出 的 DOM 内 容 非常 简单 ， 或 者 
是 刻意 依赖 默认 行为 以 获取 性 能 上 的 提升 。 示 例如 下 : 

61 «<div v-for="item in items" :key="item.id"> 


02 <1-- 内 容 --> 
603 </div> 


17.2 在 v-if/v-if-else/v-else 中 使 用 key 


如 果 一 组 v-if+v-else 的 元 素 类 型 相同 ， 最 好 使 用 属性 key ( 比如 两 个 <div> 元 素 )。 
在 第 15 章 中 ， 我 们 简单 介绍 了 v-if 指令 在 编译 后 是 下 面 的 样子 : 
61 (has) 


62 ? _c('li',[_v("if")]) 
83 : _c('li',[_v("else")]) 


20 
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上 的 


换 时 ， 


不 相 


将 旧 


所 以 当 状态 发 生变 化 时 ,生成 的 虚拟 节点 既 有 可 能 是 v-i 计 上 的 虚拟 节点 ,也 有 可 能 是 v-else 
虚拟 点 。 


默认 情况 下 ，Vuejs 会 尽 可 能 高 效 地 更 新 DOM。 这 意味 着 ， 当 它 在 相同 类 型 的 元 素 之 间 切 


A 而 不 是 将 旧 的 元 素 移 除 ,然后 在 同一 位 置 添 加 一 个 新 元 素 。 如 果 本 
同 的 元 素 被 识别 为 相同 ， 则 会 出 现 意 料 之 外 的 副作用 。 
如 果 添 加 了 属性 key， 那 么 在 比 对 虚拟 DOM 时 ， 则 会 认为 它们 是 两 个 不 同 的 节点 ， 于 是 会 
元 素 移 除 并 在 相同 的 位 置 添加 一 个 新 元 素 ， 从 而 避免 意料 之 外 的 副作用 。 
不 好 的 做 法 是 : 
el 《div v-if="error"> 
62 错误 : {{ error }} 
63 </div> 
64 «<div v-else> 
65 {{ results }} 
e6 </div> 
好 的 做 法 是 : 
el 《div 
02 Vv-if="error" 
03 key="search-status" 
64 > 
65 错误 : {{ error }} 
66 </div> 
97 《div 
08 V-else 
69 key="search-results" 
16 > 
11 {{ results }} 
12 </div> 
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参数 


在 使 用 Vuejs 开发 项 目 时 , 最 常 遇 到 的 一 个 典型 问题 就 是 ， 当 页 面 切 换 到 同一 个 路 由 但 不 同 
的 地 址 时 ， 组 件 的 生命 周期 钩子 并 不 会 重新 触发 。 


例如 ， 路 由 是 下 面 这 样 的 : 


01 const routes = [ 


02 

063 path: '/detail/:id', 
04 name: 'detail', 

65 component : Detail 
66 

67 ] 


当 我 们 从 路 由 /detail/1 切换 到 /detail/2 时 ， 组 件 是 不 会 发 生 任何 变化 的 。 
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这 是 因为 vue-router 会 识别 出 两 个 路 由 使 用 的 是 同一 个 组 件 从 而 进行 复 用 ， 并 不 会 重新 创 
建 组 件 ， 因 此 组 件 的 生命 周期 钩子 自然 也 不 会 被 触发 。 


组 件 本 质 上 是 一 个 映射 关系 , 所 以 先 销毁 再 重建 一 个 相同 的 组 件 会 存在 很 大 程度 上 的 性 能 浪 
费 ， 复 用 组 件 才 是 正确 的 选择 。 但 是 这 也 意味 着 组 件 的 生命 周期 钩子 不 会 再 被 调用 。 


我 相信 大 家 都 遇 到 过 这 个 场景 ， 下 面 总 结 了 3 个 方法 来 解决 这 个 问题 。 


17.3.1 ”路 由 导航 守卫 beforeRouteUpdate 


vue-router 提供 了 导航 守卫 beforeRouteUpdate， 该 守卫 在 当前 路 由 改变 且 组 件 被 复 用 时 
调用 ， 所 以 可 以 在 组 件 内 定义 路 由 导航 守卫 来 解决 这 个 问题 。 

组 件 的 生命 周期 钩子 虽然 不 会 重新 触发 ， 但 是 路 由 提供 的 beforeRouteUpdate 守卫 可 以 被 
触发 。 因 此 ， 只 需要 把 每 次 切换 路 由 时 需要 执行 的 逻辑 放 到 beforeRouteUpdate 守卫 中 即 可 。 
例如 ， 在 beforeRouteUpdate 守卫 中 发 送 请 求 拉 取 数据 ， 更 新 状态 并 重新 泻 染 视 图 。 这 种 方式 
是 我 最 推荐 的 一 种 方式 ， 在 vue-router2.2 之 后 的 版 本 可 以 使 用 。 


17.3.2 ”观察 $route 对 象 的 变化 
通过 watch 可 以 监听 到 路 由 对 象 发 生 的 变化 ， 从 而 对 路 由 变化 作出 响应 。 例 如 : 


61 const User = { 


82 template: '...', 

83 watch: { 

84 '$route' (to, from) { 
65 // 对 路 由 变化 作出 响应 
66 } 

67 } 

68 } 


这 种 方式 也 可 以 解决 上 述 问 题 , 但 代价 是 组 件 内 多 了 一 个 watch， 这 会 带 来 依赖 追踪 的 内 存 
开销 。 

如 果 最 终 选择 使 用 watch 解决 这 个 问题 ,那么 在 某 些 场景 下 我 推荐 在 组 件 里 只 观察 自己 需要 
的 query， 这 样 有 利于 减少 不 必要 的 请 求 。 

假设 有 这 样 一 个 场景 ,页面 中 有 两 部 分 内 容 ， 上 面 是 个 人 的 描述 信息 ,下面 一 个 带 翻 页 的 列 
表 ， 这 时 假设 路 由 中 的 参数 是 /user?id=4&page=1 时 ,说 明 用 户 ID 是 4， 列表 是 第 一 页 。 

我 们 可 以 断定 每 次 翻 页 时 只 需要 发 送 列表 的 请 求 , 而 个 人 的 描述 信息 只 需要 第 一 次 进入 组 件 
时 请 求 一 次 即 可 。 当 翻 到 第 二 页 时 ， 路 由 应 该 是 这 样 的 : /user?id=4&page=2。 

可 以 看 到 ,参数 中 的 id 没有 变 , 只 有 page 变 了 。 所 以 为 了 避免 发 送 多 余 的 请 求 , 应 该 这 样 
去 观察 路 由 : 
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81 const User = { 


02 template: '...', 

03 watch: { 

064 '$route.query.id' () { 
65 // 请 求 个 人 描述 信息 

66 }, 

67 '$route.query.page' () { 
68 // 请 求 列表 

69 } 

16 } 

1 -让 


不 好 的 做 法 是 统一 观察 $route: 


@1 const User = { 


02 template: '...', 

03 watch: { 

84 '$route' (to, from) { 
65 // 请 求 个 人 描述 信息 
86 // 请 求 列表 

67 } 

68 } 

69 } 


这 种 做 法 之 所 以 不 好 , 是 因为 如 果 路 由 参数 中 只 是 页 码 变 了 ,那么 只 需要 请 求 列表 信息 即 可 ， 


但 是 上 面 的 做 法 还 会 请 求 个 人 描述 信息 。 


17.3.3 ”为 router-view 组 件 添加 属性 key 


这 种 做 法 非常 取 巧 ， 非 常 “暴力 ”， 但 非常 有 效 。 它 本 质 上 是 利用 虚拟 DOM 在 演 染 时 通过 
key 来 对 比 两 个 节点 是 否 相 同 的 原理 。 通 过 给 router-view 组 件 设 置 key, 可 以 使 每 次 切换 路 由 


时 的 key 都 不 一 样 , 让 虚拟 DOM 认为 router-view 组 件 是 一 个 新 节点 ,从 而 先 销毁 组 件 ,， 然后 


再 重新 创建 新 组 件 。 即 使 是 相同 的 组 件 ， 但 是 如 果 url 变 了 ，key 就 变 了 ，Vuejs 就 会 重新 创建 


这 个 组 件 。 


因为 组 件 是 新 创建 的 ， 所 以 组 件 内 的 生命 周期 会 重复 触发 。 示 例如 下 : 


81 <router-view :key="$route.fullPath"></Vrouter-view> 


这 种 方式 的 坏处 很 明显 ,每 次 切换 路 由 组 件 时 都 会 被 销毁 并 且 重 新 创建 , 非常 浪费 性 能 。 其 优点 
更 明显 ， 简 单 粗暴 ， 改 动 小 。 为 router-view 组 件 设置 了 key 之 后 ， 立 刻 就 可 以 看 到 问题 被 解 


演 了 了。 
17.4 ”为 所 有 路 由 统一 添加 query 


如 果 路 由 上 的 query 中 有 一 些 是 从 上 游 链 路 上 传 下 来 的 ， 那么 需要 在 应 用 的 任何 路 由 中 携 


带 , 但 是 在 所 有 跳 转 路 由 的 地 方 都 设置 一 遍 会 非常 麻烦 。 例 如 , 在 应 用 中 的 所 有 路 由 上 都 加 上 参 


数 : https://berwin.me/a?referer=hao360cn 和 https://berwin.me/b?referer=hao360cn。 
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中 携带 ， 并 且 不 影 


理想 状态 是 ,在 全 局 统一 配置 一 个 基础 的 query， 它 会 在 应 用 的 所 有 路 
响应 用 中 各 个 路 由 的 切换 ， 也 无 须 在 切换 路 由 时 进行 任何 特殊 处 理 。 

遗憾 的 是 ，vue-router 并 没有 提供 相应 的 API 来 处 理 这 种 情况 。 下 面 提供 了 两 种 方式 来 解 
决 这 个 问题 。 


17.4.1 使 用 全 局 守卫 beforeEach 


事实 上 ， 全 局 守卫 beforeEach 并 不 具备 修改 query 的 能 力 ， 但 可 以 在 其 中 使 用 next 方法 
来 中 断 当 前 导航 ， 并 切换 到 新 导航 ， 添 加 一 些 新 query 进去 。 

当然 ， 单 单 这 样 做 会 出 问题 ， 因 为 在 进入 新 导航 后 ， 依 然 会 被 全 局 守卫 beforeEach 拦截 ， 
然后 再 次 开启 新 导航 ， 从 而 导致 无 限 循环 。 解 决 办 法 是 在 beforeEach 中 判断 这 个 全 局 添加 的 参 
数 在 路 由 对 象 中 是 否 存 在 ， 如 果 存 在 ， 则 不 开启 新 导航 : 


61 const query = {referer: “hao366cn '} 
92 router.beforeEach((to, from, next) => { 


03 to.query.referer 

84 ? next() 

85 : next({...to，query: {...to.query, ...query}}) 
e6 }) 


这 种 方式 的 优点 是 , 可 以 全 局 统一 配置 公共 的 query 参数 , 并 且 在 组 件 内 切换 路 由 时 无 须 进 
行 特殊 处 理 。 缺 点 是 每 次 切换 路 由 时 ， 全 局 守卫 beforeEach 会 执行 两 次 ， 即 每 次 切换 路 由 其 实 
是 切换 两 次 。 


下 面 的 这 种 方法 完美 解决 了 这 个 问题 。 


17.4.2 ”使 用 函数 劫持 
这 种 方式 非常 取 巧 。 前 几 天 一 个 朋友 遇 到 这 个 问题 后 , 向 我 询问 解决 办 法 , 我 通过 查看 vue- 
router 的 源码 ， 找 到 了 目前 唯一 可 以 全 局 设置 query 参数 并 且 路 由 不 会 切换 两 次 的 解决 方案 。 
这 种 方式 的 原理 是 : 通过 拦截 router.history.transitionTo 方法 ， 在 vue-router 内 部 
在 切换 路 由 之 前 将 参数 添加 到 query 中 。 其 使 用 方式 如 下 : 


61 const query = {referer: “hao366cn '} 
92 const transitionTo = router.history.transitionTo 


03 

964 router.history.transitionTo = function (location, onComplete, onAbort) { 
@5 location = typeof location === 'object’ 

66 ? {...location, query: {...location.query, ...query}} 

87 : {path: location, query} 

088 

89 transitionTo.call(router.history, location, onComplete, onAbort) 


10 } 
代码 中 ， 先 将 vue-router 内 部 的 router.history.transitionTo 方法 缓存 到 变量 transitionTo 
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中 。 随 后 使 用 一 个 新 的 函数 重 写 router.history.transitionTo 方法 ,通过 在 函数 中 修改 参数 
来 达到 全 局 添加 query 参数 的 目的 。 当 执行 缓存 的 原始 方法 时 ， 将 修改 后 的 参数 传递 进去 即 可 。 

这 种 方式 的 优点 是 可 以 全 局 添加 query 参数 并 且 不 会 导致 路 由 切换 两 次 。 缺 点 是 通过 修改 
vue-router 内 部 方法 实现 目的 ， 这 是 一 种 很 危险 的 操作 。 


17.5 区 分 Vuex 与 props 的 使 用 边 丙 


我 身边 的 很 多 朋友 和 同事 对 于 组 件 何 时 从 Vuex 的 Store 获取 状态 ， 何 时 使 用 props 接收 父 
组 件 传 递 进来 的 状态 ,并 没有 很 清晰 的 了 解 。 因 此 ,我 想 这 个 问题 可 能 是 一 个 普遍 现象 ， 故 决定 
在 本 书 中 用 一 节 来 聊 一 聊 我 是 如 何 看 待 这 个 问题 的 。 

通常 , 在 项 目 开 发 中 , 业务 组 件 会 使 用 Vuex 维护 状态 , 使 用 不 同 组 件 统一 操作 Vuex 中 的 状 
态 。 这 样 不 论 是 父子 组 件 间 的 通信 还 是 兄弟 组 件 间 的 通信 ， 都 很 容易 。 
对 于 通用 组 件 , 我 会 使 用 props 以 及 事件 进行 父子 组 件 间 的 通信 (通用 组 件 不 需要 兄弟 组 件 
间 的 通信 )。 这 样 做 是 因为 通用 组 件 会 拿 到 各 个 业务 组 件 中 使 用 ， 它 要 与 业务 解 厢 ， 所 以 需要 使 
用 props 获取 状态 。 

通用 组 件 要 定义 细致 的 prop， 并 且 尽 可 能 详细 ， 至 少 需 要 指定 其 类 型 。 这 样 做 的 好 处 是 : 
口 写 明 了 组 件 的 API， 所 以 很 容易 看 懂 组 件 的 用 法 ; 
口 在 开发 环境 下 ， 如 果 向 一 个 组 件 提 供 格 式 不 正确 的 prop ，Vuejjs 将 会 在 控制 台 发 出 警 

告 ， 帮 助 我 们 捕获 潜在 的 错误 来 源 。 


17.6 ”避免 v-if 和 v-for 一 起 使 用 

Vue.js 官方 强烈 建议 不 要 把 v-if 和 v-for 同时 用 在 同一 个 元 素 上 。 

通常 ， 我 们 在 下 面 两 种 常见 的 情况 下 ， 会 倾向 于 不 同 的 做 法 。 

口 为 了 过 滤 一 个 列表 中 的 项 目 (比如 v-for="user in users" v-if="user.isActive" )， 

请 将 users 替换 为 一 个 计算 属性 (比如 activeUsers ) ， 让 它 返回 过 滤 后 的 列表 。 

口 为 了 避免 泻 染 本 应 该 被 隐藏 的 列表 ( 比如 v-for="user in users" v-if="shouldShow- 
Users" ) ， 请 将 v-if 移动 至 容 需 元 素 上 (比如 ul 和 ol) 。 

对 于 第 一 种 情况 ，Vue.js 官方 给 出 的 解释 是 : 当 Vue.js 处 理 指令 时 ，v-for 比 v-if 具有 更 
高 的 优先 级 , 所 以 即使 我 们 只 泻 染 出 列表 中 的 一 小 部 分 元 素 , 也 得 在 每 次 重演 染 的 时 候 人 遍历 整个 
列表 , 而 不 考虑 活跃 用 户 是 否 发 生 了 变化 。 通过 将 列表 更 换 为 在 一 个 计算 属性 上 遍历 并 过 滤 掉 不 
需要 泻 染 的 数据 ， 我 们 将 会 获得 如 下 好 人 处。 

口 过 滤 后 的 列表 只 会 在 数组 发 生 相 关 变 化 时 才 被 重新 运算 ， 过滤 更 高 效 。 
口 使 用 v-for="user in activeUsers" 之 后 ， 我 们 在 演 染 时 只 遍历 活跃 用 户 ， 演 染 更 高 效 。 
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口 解 夭 泻 染 层 的 逻辑 ， 可 维护 性 〈 对 逻辑 的 更 改 和 扩展 ) 更 强 。 
例如 ， 下 面 这 个 模板 : 


el <ul> 

62 <1i 

63 Vv-for="user in users" 
04 V-if="user.isActive" 
85 :key="user.id" 

66 > 

87 {{ user.name }} 

08 </1i> 

69 </ul> 


可 以 更 换 为 在 如 下 的 一 个 计算 


81 computed: { 


属性 上 遍历 并 过 滤 列 表 : 


| 


62 activeUsers: function () { 
83 return this.users.filter(function (user) { 
04 return user.isActive 
65 }) 

06 } 

67 } 

模板 更 改 为 : 

61 <ul> 

02 <1i 

03 Vv-for="user in activeUsers" 
84 :key="user.id" 

85 > 

66 {{ user.name }} 

67 </1i> 

68 </ul> 

对 于 第 二 种 情况 ， 官 方 解 释 是 为 了 获得 同样 的 好 处 ， 可 以 把 : 
61 <ul> 

82 <1i 

83 Vv-for="user in users" 

64 VvV-if="shouldShowUsers" 
85 :key="user.id" 

866 > 

87 {{ user.name }} 

68 </1i> 

69 </ul> 

更 新 为 : 

91 <ul v-if="shouldShowUsers"> 
82 <1i 

03 V-for="user in users" 

84 :key="user.id" 

85 > 

66 {{ user.name }} 

87 </1i> 


68 </ul> 
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通过 将 v-if 移动 到 容器 元 素 ， 我 们 不 会 再 检查 每 个 用 户 的 shouldshowusers， 取 而 代 之 的 
是 ， 我 们 只 检查 它 一 次 ， 且 不 会 在 shouldShowUsers 为 false 的 时 候 运 算 v-for。 


17.7 “为 组 件 样式 设置 作用 域 


CSS 的 规则 都 是 全 局 的 ,任何 一 个 组 件 的 样式 规则 都 对 整个 页 面 有 效 。 因 此 ,我 们 很 容易 在 
一 个 组 件 中 写 了 某 个 样式 ， 而 不 小 心 影响 了 另 一 个 组 件 的 样式 ,或 者 自己 的 组 件 被 第 三 方 库 的 
CSS 影响 了 。 

对 于 应 用 来 说 ， 最 佳 实践 是 只 有 顶级 App 组 件 和 布局 组 件 中 的 样式 可 以 是 全 局 的 ， 其 他 所 
有 组 件 都 应 该 是 有 作用 域 的 。 


注意 这 条 规则 只 在 单 文件 组 件 下 生效 。 


在 Vue.js 中 ， 可 以 通过 scoped 特性 或 CSS Modules (一 个 基于 class 的 类 似 BEM 的 策略 ) 
来 设置 组 件 样式 作用 域 。 
对 于 组 件 库 ,我 们 应 该 更 倾向 于 选用 基于 class 的 策略 而 不 是 scoped 特性 。 因 为 基于 class 
的 策略 使 覆 写 内 部 样式 更 容易 , 它 使 用 容易 理解 的 class 名 称 且 没有 太 高 的 选择 器 优先 级 , 不 容 
易 导 致 冲 突 。 


不 好 的 例子 : 

91 <template> 

62 <button class="btn btn-close">X</button> 
863 </template> 

64 


85 《style> 
66 .btn-close { 


87 background-color: red; 

68 } 

89 </style> 

好 的 例子 : 

81 <template> 

62 <button class="button button-close">X</button> 
63 </template> 

64 


65 <1-- 使 用 scoped 特性 --> 
86 <style scoped> 
67 .button { 


08 border: none; 
69 border-radius: 2px; 
10 } 
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12 .button-close { 


13 background-color: red; 

14 } 

15 </style> 

好 的 例子 : 

61 <template> 

02 <button :class="[$style.button, $style.buttonClose]">X</button> 
63 </template> 

04 


85  《!-- 使 用 CSS Modules--> 
86 《style module> 
87 .button { 


088 border: none; 

@9 border-radius: 2px; 

10 } 

11 

12 .buttonClose { 

13 background-color: red; 
44。 疗 


15 «</style> 


17.8 ”避免 在 scoped 中 使 用 元 素 选 择 器 


在 scoped 样式 中 ， 类 选择 器 比 元 素 选 择 器 更 好 ， 因 为 大 量 使 用 元 素 选择 器 是 很 慢 的 。 

为 了 给 样式 设置 作用 域 ，Vuejjs 会 为 元 素 添加 一 个 独一无二 的 特性 , 例如 data-v-f3f3eg9。 
然后 修改 选择 器 ， 使 得 在 匹配 选择 器 的 元 素 中 ， 只 有 带 这 个 特性 的 才 会 真正 生效 ( 比如 
button[data-v-f3f3eg9] )。 

问题 在 于 ， 大 量 的 元 素 和 特性 组 合 的 选择 器 ( 比如 button[data-v-f3f3eg9] ) 会 比 类 和 特 
性 组 合 的 选择 器 慢 ， 所 以 应 该 尽 可 能 选用 类 选择 器 。 


不 好 的 例子 : 

61 <template> 

02 <button>X</buttony> 
63 </template> 

@4 


85 <style scoped> 
86 button { 


67 background-color: red; 

088 

869 </style> 

好 的 例子 : 

61 <template> 

02 <button class="btn btn-close">X</button> 


63 </template> 
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85 <style scoped> 

66 .btn-close { 

87 background-color: red; 
68 } 

89 </style> 


17.9 避免 隐 性 的 父子 组 件 通 信 
我 们 应 该 优先 通过 prop 和 事件 进行 父子 组 件 之 间 的 通信 ， 而 不 是 使 用 this.$parent 或 改 


变 prop。 
一 个 理想 的 Vuejs 应 用 是 “prop 向 下 传递 ， 事 件 向 上 传递 ”。 遵 循 这 一 约定 会 让 你 的 组 件 
更 容易 理解 。 然 而 ， 在 一 些 边界 情况 下 ，prop 的 变更 或 this.$parent 能 够 简化 两 个 次 度 耦 合 
的 组 件 。 

问题 在 于 ， 这 种 做 法 在 很 多 简单 的 场景 下 可 能 会 更 方便 。 但 要 注意 ,不 要 为 了 一 时 方便 ( 少 
写 代 码 ) 而 牺牲 数据 流向 的 简洁 性 (易于 理解 )。 


17.10” 单 文件 组 件 如 何 命名 


单 文件 组 件 的 命名 虽然 不 会 影响 代码 的 正常 运转 , 但 是 一 个 良好 的 命名 规范 能 够 在 绝 大 多 数 
工程 中 改善 可 读 性 和 开发 体验 。 


17.10.1 ” 单 文件 组 件 的 文件 名 的 大 小 写 


单 文件 组 件 的 文件 名 应 该 始终 是 单词 首 字母 大 写 ( PascalCase )， 或 者 始终 是 横 线 连接 的 
( kebab-case )。 

单词 首 字 母 大 写 对 于 代码 编辑 器 的 自动 补 全 最 为 友好 ， 因 为 这 会 使 JS(X) 和 模板 中 引用 组 件 
的 方式 尽 可 能 一 致 。 然 而 ， 混 用 文件 的 命名 方式 有 时 候 会 导致 文件 系统 对 大 小 写 不 敏感 的 问题 ， 
这 也 是 横 线 连接 命名 可 取 的 原因 。 


不 好 的 例子 : 

01 components/ 

62 |- mycomponent .vue 
063 components/ 

64 |- myComponent.vue 
好 的 例子 : 

81 components/ 

62 |- MyComponent.vue 


63 components/ 
64 |- my-component.vue 
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17.10.2 ”基础 组 件 名 


应 用 特定 样式 和 约定 的 基础 组 件 (也 就 是 展示 类 的 、 无 逻辑 的 或 无 状态 的 组 件 ) 应 该 全 部 以 
一 个 特定 的 前 缀 开头 ， 比 如 Base、App 或 V。 这 些 组 件 可 以 为 你 的 应 用 黄 定 一 致 的 基础 样式 和 行 
为 。 它 们 可 能 只 包括 : 

口 HTML 元 素 
口 其 他 基础 组 件 
口 第 三 方 UI 组 件 库 

它们 绝 不 会 包括 全 局 状态 (比如 来 自 Vuex store )。 

它们 的 名 字 通 常 包含 所 包 庄 元 素 的 名 字 ( 比如 BaseButton 、BaseTable )， 除 非 没 有 现成 的 对 
应 功能 的 元 素 ( 比如 BaseIcon )。 如 果 你 为 特定 的 上 下 文 构建 类 似 的 组 件 ， 那 么 它们 几乎 总 会 消 
费 这 些 组 件 (比如 BaseButton 可 能 会 用 在 ButtonSubmit 上 )。 

这 样 做 的 几 个 好 处 如 下 。 

口 当 你 在 编辑 器 中 以 字母 顺序 排序 时 ， 应 用 的 基础 组 件 会 全 部 列 在 一 起 ， 这 样 更 容易 识别 。 

口 因为 组 件 名 应 该 始终 是 多 个 单词 ， 所 以 这 样 做 可 以 避免 你 在 包 于 简单 组 件 时 随意 选择 前 

级 (比如 MyButton 和 VueButton ) 。 

口 因为 这 些 组 件 会 被 频繁 使 用 ， 所 以 你 可 能 想 把 它们 放 到 全 局 而 不 是 在 各 处 分 别 导 入 它 
们 。 使 用 相同 的 前 缀 可 以 让 webpack 这 样 工作 : 


61 var requireComponent = require.context("./src", true, /^Base[A-Z]/) 
62 requireComponent.keys().forEach(function (fileName) { 


63 var baseComponentConfig = requireComponent(fileName) 
64 baseComponentConfig = baseComponentConfig.default || baseComponentConfig 
65 var baseComponentName = baseComponentConfig.name || ( 
66 fileName 
67 .replace(/^.+\//， '') 
68 .replace(/\.\w+$/, '') 
69 ) 
16 Vue.component(baseComponentName, baseComponentConfig) 
11 }) 

不 好 的 例子 : 

01 components/ 

62 |- MyButton.vue 

63 |- VueTable.vue 

64 |- Icon.vue 

好 的 例子 : 

91 components/ 

62 |- BaseButton.vue 

63 |- BaseTable.vue 

64 |- BaseIcon.vue 


85 components/ 
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86 - AppButton.vue 
97 - AppTable.vue 
68 - AppIcon.Vvue 


| 
| 
| 
69 components/ 
| 
| 
| 


16 - VButton.vue 
11 - VTable.vue 
2 - VIcon.vue 


17.10.3” 单 例 组 件 名 


只 拥有 单个 活跃 实例 的 组 件 以 The 前 缀 命名 , 以 示 其 唯一 性 。 但 这 并 不 意味 着 组 件 只 可 用 于 
一 个 单 页 面 ， 而 是 每 个 页 面 只 使 用 一 次 。 这 些 组 件 永远 不 接受 任何 prop， 因 为 它们 是 为 你 的 应 
用 定制 的 ， 而 不 是 应 用 中 的 上 下 文 。 如 果 你 发 现 有 必要 添加 prop ， 就 表明 这 实际 上 是 一 个 可 复 


用 的 组 件 ， 只 是 目前 在 每 个 页 面 里 只 使 用 了 一 次 。 


不 好 的 例子 : 

81 components/ 

62 |- Heading.vue 

63 |- MySidebar.vue 
好 的 例子 : 

81 components/ 

62 |- TheHeading.vue 
63 |- Thesidebar.vue 


17.10.4 ”紧密 耦合 的 组 件 名 
和 父 组 件 紧 密 耦 合 的 子 组 件 应 该 以 父 组 件 名 作为 前 缀 命名 。 


如 果 一 个 组 件 只 在 某 个 父 组 件 的 场景 下 有 意义 , 那么 这 层 关系 应 该 体现 在 其 名 字 上 。 编 
通常 会 按 字母 顺序 组 织 文件 ， 这 样 做 可 以 把 相关 联 的 文件 排 在 一 起 。 


通常 ， 我 们 可 以 通过 在 父 组 件 命名 的 目录 中 内 套 子 组 件 以 解决 这 个 问题 。 比 如 : 


61 components/ 


62 |- TodoList/ 

63 | - Item/ 

64 |- index.vue 

65 |- Button.vue 

66 |- index.vue 
或 者 : 

81 components/ 

62 |- TodoList/ 

63 | - Item/ 

64 |- Button.vue 


65 | - Item.vue 
66 |- TodoList.vue 
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但 是 我 们 并 不 推荐 这 种 方式 ， 因 为 这 会 导致 
口 许多 文件 的 名 字 相 同 ， 这 使 得 在 编辑 器 中 快速 切换 文件 变 得 困难 ; 
口 过 多 舱 套 的 子 目 录 增 加 了 在 编辑 带 侧 边栏 中 浏览 组 件 所 花 的 时 间 。 


更 推荐 的 例子 : 

01 components/ 

602 |- TodoList.vue 

63 |- TodoListItem.vue 

04 |- TodoListItemButton.vue 

85 components/ 

606 |- Searchsidebar.vue 

67 |- SearchsidebarNavigation.vue 
非常 不 好 的 例子 : 

91 components/ 

862 |- TodoList.vue 

63 |- TodoItem.vue 

64 |- TodoButton.vue 

85 components/ 

66 |- Searchsidebar.vue 

67 |- NavigationForSearchSidebar.vue 


17.10.5 ”组件 名 中 的 单词 顺序 


组 件 名 应 该 以 高 级 别 的 〈 通常 是 一 般 化 描述 的 ) 单词 开头 ， 以 描述 性 的 修饰 词 结尾 。 


注意 ”规范 组 件 名 中 的 单词 顺序 似乎 有 点 强人 所 难 ， 但 如 果 可 以 做 到 这 一 点 ， 能 极 大 提升 项 目 


工程 的 可 读 性 和 开发 效率 。 


你 可 能 会 疑惑 ， 为 什么 我 们 给 组 件 命名 时 不 多 遵从 自然 语言 呢 ? 在 自然 的 英文 里 ， 
其 他 描述 语 通常 都 出 现在 名 词 之 前 ， 否 则 需要 使 用 连接 词 。 比 如 ; 

口 Coffee with milk 

口 Soup of the day 


口 Visitor to the museum 


如 果 你 愿意 ， 完 全 可 以 在 组 件 名 里 包含 这 些 连接 词 ， 但 是 单词 的 顺序 很 重要 。 


形容 词 和 


同样 要 注意 的 是 ， 在 应 用 中 所 谓 的 “高 级 别 ”， 是 跟 语 境 有 关 的 。 比 如 对 于 一 个 带 搜索 表单 


应 用 来 说 ， 它 可 能 包含 这 样 的 组 件 : 


01 components/ 


62 |- ClearSearchButton.vue 

63 |- ExcludeFromSearchInput.vue 
64 |- LaunchonstartupCheckbox.vue 
65 |- RunsearchButton.vue 
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066 |- SearchInput.vue 
67 |- TermsCheckbox.vue 


你 可 能 注意 到 了 ， 我 们 很 难看 出 来 哪些 组 件 是 针对 搜索 的 。 现 在 根据 规则 给 组 件 重新 命名 : 


87 


components/ 

|- SearchButtonClear.vue 

|- SearchButtonRun.vue 

|- SearchInputExcludeGlob.vue 

|- SearchInputQuery .vue 

|- SettingsCheckboxLaunchonstartup.vue 
|- SettingsCheckboxTerms .vue 


因为 编辑 器 通常 会 按 字 母 顺序 组 织 文 件 ， 所 以 现在 组 件 之 间 的 重要 关系 一 目 了 然 了 。 
你 可 能 想 换 成 多 级 目录 的 方式 , 把 所 有 的 搜索 组 件 放 到 search 目录 , 把 所 有 的 设置 组 件 放 到 


settings 目录 。Vue.js 官方 推荐 只 有 在 非常 大 型 (如 有 100+ 个 组 件 ) 的 应 用 下 才 考 虑 这 么 做 ， 原 


因 有 以 下 几 点 。 


口 在 多 级 目录 间 找 来 找 去 比 在 单个 components 目录 下 滚动 查找 花费 更 多 的 精力 。 


口 存在 组 件 重 名 的 时 候 (比如 存在 多 个 ButtonDelete 组 件 ) ， 在 编辑 器 里 更 难 快速 定位 。 
口 让 重 构 变 得 更 难 ， 因 为 为 一 个 移动 了 的 组 件 更 新 相关 引用 时 ， 查 找 或 替换 通常 并 不 高 效 。 


不 好 的 例子 : 
81 components/ 
62 |- ClearSearchButton.vue 
63 |- ExcludeFromSearchInput.vue 
64 |- LaunchonstartupCheckbox.vue 
65 |- RunsearchButton.vue 
66 |- SearchInput.vue 
67 |- TermsCheckbox.vue 
好 的 例子 : 
61 components/ 
62 |- SearchButtonClear.vue 
63 |- SearchButtonRun.vue 
64 |- SearchInputQuery.vue 
65 |- SearchInputExcludeGlob.vue 
66 |- SettingsCheckboxTerms.vue 
67 |- SettingsCheckboxLaunchonstartup.vue 
一 := 
17.10.6 ”完整 单词 的 组 件 名 


组 件 名 应 该 倾向 于 完整 单词 而 不 是 缩写 。 编辑 器 中 的 自动 补 全 已 经 让 书写 长 命名 的 代价 非常 
低 了 ， 而 它 带 来 的 明确 性 却 是 非常 宝贵 的 。 尤 其 应 该 避免 不 常用 的 缩写 。 


不 好 的 例子 : 

01 components/ 

62 |- Sdsettings.vue 
63 |- UProfopts.vue 
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推荐 的 例子 : 

91 components/ 

62 |- StudentDashboardSsettings.vue 
63 |- UserProfile0ptions .vue 


17.10.7 ”组 件 名 为 多 个 单词 


组 件 名 应 该 始终 由 多 个 单词 组 成 ， 但 是 根 组 件 App 除外 。 这 样 做 可 以 避免 与 现 有 的 以 及 未 
来 的 HTML 元 素 相 冲 突 ， 因 为 所 有 的 HTML 元 素 名 称 都 是 单个 单词 的 。 


不 好 的 例子 : 

61 Vue.component('todo', { 
62 // 

e3 }) 

84 export default { 

@5 name: 'Todo', 

66 /fe 

67 } 

推荐 的 例子 : 

61 Vue.component('todo-item', { 
62 /fe 

e3 }) 

894 export default { 

@5 name: “TodoItem '， 

66 /fe 

67 } 


17.10.8 ”模板 中 的 组 件 名 大 小 写 


对 于 绝 大 多 数 项 目 来 说 ， 在 单 文件 组 件 和 字符 串 模 板 中 的 组 件 名 应 该 总 是 单词 首 字 母 大 写 ， 
但 是 在 DOM 模板 中 总 是 横 线 连接 的 。 


说 明 DOM 模板 指 的 是 那些 从 DOM 中 取出 来 的 模板 。 例 如 ,在 template 选项 中 设置 选择 符 。 
template 的 值 如 果 以 # 开 头 ， 则 它 将 用 作 选 择 符 ， 并 使 用 匹配 元 素 的 innerHTML 作为 模 
板 。 当 render 函数 和 template 属性 都 不 存在 时 ,el 属性 对 应 的 挂 载 DOM 元 素 的 HTML 
会 被 提出 来 用 作 模 板 。 


单词 首 字母 大 写 比 横 线 连接 有 如 下 优势 。 

口 编辑 器 可 以 在 模板 里 自动 补 全 组 件 名 ， 因 为 单词 首 字 母 大 写 同 样 适用 于 JavaScript。 

口 在 视觉 上 ，<MyComponent> 比 <my-component> 更 能 够 和 单个 单词 的 HTML 元 素 区 别 开 
来 ， 因 为 前 者 有 两 个 大 写字 母 ， 后 者 只 有 一 个 横 线 。 
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口 如 果 你 在 模板 中 使 用 任何 非 Vuejs 的 自 定 义 元 素 ， 比 如 一 个 Web Component， 单 词 首 字 
母 大 写 确 保 了 你 的 Vue.js 组 件 在 视觉 上 仍然 是 易 识 别 的 。 


不 幸 的 是 ， 由 于 HTML 对 大 小 写 不 敏感 ， 所 以 在 DOM 模板 中 必须 使 用 横 线 连接 的 方式 。 

另外 需要 注意 的 是 ， 如 果 你 已 经 是 横 线 连接 的 重度 用 户 ， 那 么 与 HTML 保持 一 致 旦 在 多 个 
项 目 中 保持 相同 的 大 小 写 规则 的 命名 约定 就 可 能 比 上 述 优势 更 为 重要 。 在 这 些 情况 下 , 在 所 有 的 
地 方 都 使 用 横 线 连接 同样 是 可 以 接受 的 。 

不 好 的 例子 : 


61 <1-- 在 单 文件 组 件 和 字符 囊 模板 中 --> 
92 <mycomponent/> 

83 <1-- 在 单 文件 组 件 和 字符 串 模 板 中 --> 
94 <myComponent/> 

65 <x!1-- 在 DOM 模板 中 --> 

866 <MyComponent></MyComponent> 


推荐 的 例子 : 


861 <1-- 在 单 文件 组 件 和 字符 囊 模板 中 --> 
92 <MyComponent/> 

63 <1-- 在 DOM 模板 中 --> 

64 <my-component></my-component> 


或 者 : 
61 <1-- 在 所 有 地 方 --> 


802 <my-component></my-component> 


17.10.9 JS/JSX 中 的 组 件 名 大 小 写 


JSJSX 中 的 组 件 名 应 该 始终 是 单词 首 字母 大 写 的 。 尽 管 在 较为 简单 的 应 用 中 只 使 用 
Vue.component 进行 全 局 组 件 注册 时 ， 可 以 使 用 横 线 连接 字符 串 。 


在 JavaScript 中 ， 单 词 首 字 母 大 写 是 类 和 构造 函数 (本质 上 是 任何 可 以 产生 多 份 不 同 实例 的 
东西 ) 的 命名 约定 。Vuejs 组 件 也 有 多 份 实例 ， 所 以 同样 使 用 单词 首 字 母 大 写 是 有 意义 的 。 额 外 
的 好 处 是 , 在 JSX ( 和 模板 ) 里 使 用 单词 首 字 母 大 写 能 够 让 读者 更 容易 分 辨 Vuejs 组 件 和 HTML 
元 素 。 


然而 ， 对 于 只 通过 vue.component 定义 全 局 组 件 的 应 用 来 说 ， 我 们 推荐 使 用 横 线 连接 的 方 
式 ， 原 因 有 两 点 。 
口 全 局 组 件 很 少 被 JavaScript 引用， 所 以 遵守 JavaScript 的 命名 约定 意义 不 大 。 
口 这 些 应 用 往往 包含 许多 DOM 内 的 模板 ， 这 种 情况 下 必须 使 用 横 线 连接 的 方式 。 
不 好 的 例子 : 


81 Vue.component('myComponent', { 
02 /fe 
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e3 }) 
94 import myComponent from './MyComponent.vue’ 
@5 export default { 


86 name: “myComponent ' ， 

67 /fe 

68 } 

89 export default { 

16 name: “my-component '， 

11 /fe 

12 } 

推荐 的 例子 : 

61 Vue.component('MyComponent', { 
62 /fe 

e3 }) 

64 Vue.component('my-component', { 
65 /1 

66 }) 


97 import MyComponent from “./MyComponent .Vvue 
88 export default { 


89 name: “MyComponent ' ， 
16 // 
be 


17.11 ” 自 闭合 组 件 


在 单 文件 组 件 、 字 符 串 模板 和 JSX 中 , 没有 内 容 的 组 件 应 该 是 自 闭合 的 , 但 在 DOM 模板 中 
永远 不 要 这 样 做 。 

自 闭合 组 件 表示 它们 不 仅 没 有 内 容 , 而 且 刻 意 没 有 内 容 , 这 就 好 像 书 上 的 一 页 白 纸 对 比 贴 有 
“本 页 有 意 留 白 ” 标 签 的 白 纸 。 而 且 没 有 额外 的 闭合 标签 ， 你 的 代码 也 更 简洁 。 


不 幸 的 是 ，HTML 并 不 支持 自 闭合 的 自 定义 元 素 ， 只 有 官方 的 “ 空 ”元 素 。 所 以 上 述 策略 仪 
适用 于 ,进入 DOM 之 前 Vuejjs 的 模板 编译 器 能 够 触 达 的 地 方 ， 然 后 再 生成 符合 DOM 规范 的 
HTML。 这 也 是 不 要 在 DOM 模板 中 这 样 做 的 原因 。 


不 好 的 例子 : 


61 <1-- 在 单 文件 组 件 、 字 符 串 模板 和 JSX 中 --> 
82 <MyComponent></MyComponent> 

63 <1-- 在 DOM 模板 中 --> 

64 <my-component/> 


推荐 的 例子 : 


61 <1-- 在 单 文 件 组 件 、 字 符 串 模板 和 JSX 中 --> 
62 《MyComponent/> 

63 《<!-- 在 DOM 模 板 中 --> 

84 <my-component></my-component> 
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17.12 prop 名 的 大 小 写 
在 声明 prop 的 时 候 ， 其 命名 应 该 始终 使 用 驼峰 式 命 名 规则 ， 而 在 模板 和 JSX 中 应 该 始终 使 
用 横 线 连接 的 方式 。 


这 里 我 们 遵循 每 个 语言 的 约定 , 在 JavaScript 中 更 多 使 用 驼峰 式 命名 规则 ， 而 在 HTML 中 则 
是 横 线 连接 的 方式 。 


不 好 的 例子 : 

91 props: { 

02 'greeting-text': String 

63 } 

64 <WelcomeMessage greetingText="hi"/> 
推荐 的 例子 : 

91 props: { 

02 greetingText: String 

03 


64 <WelcomeMessage greeting-text="hi"/> 


17.13 ”多 个 特性 的 元 素 

多 个 特性 的 元 素 应 该 分 多 行 撰 写 ， 每 个 特性 一 行 。 在 JavaScript 中 ， 用 多 行 分 隔 对 象 的 多 个 
属性 是 很 常见 的 最 佳 实践 ， 因 为 这 更 易 读 。 模板 和 JSX 值得 我 们 做 相同 的 考虑 。 

不 好 的 例子 : 


el 《img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> 
@2 <MyComponent foo="a" bar="b" baz="c"/> 


推荐 的 例子 : 

91 <img 

02 src="https://vuejs.org/images/logo.png" 
03 alt="Vue Logo" 

64 > 

65 <MyComponent 

66 foo="a" 

87 bar="b" 

68 baz="c" 

69 /> 


17.14 ”模板 中 简单 的 表达 式 


组 件 模板 应 该 只 包含 简单 的 表达 式 ， 复 杂 的 表达 式 则 应 该 重 构 为 计算 属性 或 方法 。 
复杂 的 表达 式 会 让 模板 变 得 不 是 那么 声明 式 。 我 们 应 该 尽量 描述 理应 出 现 的 是 什么 , 而 非 如 
何 计算 那个 值 。 而 且 计 算 属性 和 方法 使 得 代码 可 以 重用 。 
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不 好 的 例子 : 

el {{ 

02 fullName.split(' ').map(function (word) { 

@3 return word[8].toUpperCase() + word.slice(1) 
84 }).join(' ') 

e5 }} 

推荐 的 例子 : 


61 《1!-- 在 模板 中 --> 

62  {{ normalizedFullName }} 

863 // 复杂 表达 式 已 经 移入 一 个 计算 属性 
0@4 computed: { 


85 normalizedFullName: function () { 

66 return this.fullName.split(' ').map(function (word) { 
87 return word[6].toUpperCase() + word.slice(1) 

88 }).join(' ') 

69 } 

10 } 


17.15 ”简单 的 计算 属性 
应 该 把 复杂 的 计算 属性 分 隔 为 尽 可 能 多 更 简单 的 属性 。 简单 、 命 名 得 当 的 计算 


村 点 。 

D 易于 测试 : 当 每 个 计算 属性 都 包含 一 个 非常 简单 且 很 少 依赖 的 表达 式 时 ， 撰 写 测试 以 确 

保 其 正确 工作 会 更 加 容易 。 

口 易于 阅读 : 简化 计算 属性 要 求 你 为 每 一 个 值 都 起 一 个 描述 性 的 名 称 ， 即 便 它 不 可 复 用 。 

这 使 得 开发 者 更 容易 专注 在 代码 上 并 搞 清楚 发 生 了 什么 。 

口 更 好 地 “拥抱 变化 ”: 任何 能 够 命名 的 值 都 可 能 用 在 视图 上 。 举 个 例子 ,我 们 可 能 打算 
展示 一 个 信息 ， 告 诉 用 户 他 们 存 了 多 少 钱 ; 也 可 能 打算 计算 税 费 ， 但 是 可 能 会 分 开展 
现 ， 而 不 是 作为 总 价 的 一 部 分 。 

较 小 的 、 专 注 的 计算 属性 减少 了 信息 使 用 时 的 假设 性 限制 , 所 以 需求 变更 时 也 不 需要 那么 多 

重 构 了 。 


性 具有 以 下 


| 


不 好 的 例子 : 

61 computed: { 

62 price: function () { 

83 var basePrice = this.manufactureCost / (1 - this.profitMargin) 
64 return ( 

@5 basePrice - 

66 basepPrice * (this.discountPercent || 6) 

67 ) 

68 } 

09 } 


推荐 的 例子 : 
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站 


61 computed: { 


02 basePrice: function () { 

03 return this.manufactureCost / (1 - this.profitMargin) 
64 }， 

65 discount: function () { 

66 return this.basePrice * (this.discountPercent || 6) 
67 }， 

68 finalPrice: function () { 

69 return this.basePrice - this.discount 

16 

1 二 


17.16 ”指令 缩写 


和 令 缩 写 (用 :表示 v-bind: 、@ 表 示 v-on: ) 要 保持 统一 。 


不 好 的 例子 : 

91 xinput 

82 v-bind:value="newTodoText" 

03 :placeholder="newTodoInstructions" 
64 > 

65 <input 

86 v-on:input="onInput" 

67 @focus="onFocus" 

68 > 

推荐 的 例子 : 

el “input 

062 :value="newTodoText" 

03 :placeholder="newTodoInstructions" 
64 > 

65 <input 

66 v-bind:value="newTodoText" 

67 v-bind:placeholder="newTodoInstructions" 
98 > 

69 《input 

16 @input="onInput" 

11 @focus="onFocus" 

42 > 

13 <input 

14 v-on:input="onInput" 

15 v-on:focus="onFocus" 

16 > 


17.17 良好 的 代码 顺序 
代码 顺序 指 的 是 组 件 /实例 的 选项 的 顺序 、 元 素 特性 的 顺序 以 及 单 文件 组 件 的 顶级 元 素 的 顺序 。 


17.17.1 组件 /实例 的 选项 的 顺序 
组 件 / 实 例 的 选项 应 该 有 统一 的 顺序 。 下 面 是 Vuejjs 官方 推荐 的 组 件 选 项 默认 顺序 ， 它们 被 
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划分 为 几 大 类 ， 从 中 能 知道 从 插件 里 添加 的 新 属性 应 该 放 到 哪里 。 
口 副作用 ( 触发 组 件 外 的 影响 ) 


el 

口 全 局 感知 ( 要 求 组件 以 外 的 知识 ) 
Name 
parent 


口 组 件 类 型 (更改 组件 的 类 型 ) 
functional 
口 模板 修改 器 (改变 模板 的 编译 方式 ) 


@ delimiters 


@ Comments 
口 模板 依赖 〈 模板 内 使 用 的 资源 ) 


量 COmponents 


directives 


@ filters 

口 组 合 ( 向 选项 里 合并 属性 ) 
四 extends 
@ mixins 


口 接口 (组 件 的 接口 ) 
四 inheritAttrs 
@ model 
mm props/propsData 
口 本 地 状态 ( 本 地 的 响应 式 属性 ) 


data 


@ computed 
口 事件 (通过 响应 式 事件 触发 的 回调 ) 
mm Watch 
@ 生命 周期 钩子 〈 按照 它们 被 调用 的 顺序 ) 
> beforeCreate 


> created 
> beforeMount 


> mounted 

> beforeUpdate 
> updated 

> activated 

> deactivated 
> beforeDestroy 
> destroyed 


口 非 响应 式 的 属性 〈 不 依赖 响应 系统 的 实例 属性 ) 
四 methods 
口 泻 染 《〈 组 件 输出 的 声明 式 描 述 ) 


m template/render 


renderError 


17.17.2 ”元素 特性 的 顺序 
元 素 (包括 组 件 ) 的 特性 应 该 有 统一 的 顺序 。 下 面 是 Vuejs 官方 为 元 素 特性 推荐 的 默认 顺序 ， 
它们 被 划分 为 几 大 类 ， 从 中 也 能 知道 新 添加 的 自 定义 特性 和 指令 应 该 放 到 哪里 。 
口 定义 〈 提 供 组 件 的 选项 ) 
is 
口 列表 演 染 ( 创建 多 个 变化 的 相同 元 素 ) 
mvV-for 


口 条 件 演 染 (元素 是 否 演 染 / 显 示 ) 


VvV-if 
mv-else-if 
国 V-else 

国 V-Show 


国 V-C1oak 
口 浑 染 方式 (改变 元 素 的 泻 染 方式 ) 
国 V-pre 


mV-once 
口 全 局 感知 (需要 超越 组 件 的 知识 ) 


加 jd 
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口 唯一 的 特性 ( 需要 唯一 值 的 特性 ) 

m ref 

key 

国 Slot 
口 双向 绑 定 〈 把 绑 定 和 事件 结合 起 来 ) 
加 V-model 
口 其 他 特性 〈 所 有 善 通 的 绑 定 或 未 绑 定 的 特性 ) 
口 事件 (组 件 事件 监听 器 ) 


hl 


国 V-On 

口 内 容 ( 履 写 元 素 的 内 容 ) 
国 V-htm] 
国 V- 七 eXt 


17.17.3” 单 文件 组 件 顶 级 元 素 的 顺序 


单 文 件 组 件 应 该 总 是 让 <script>、<template> 和 <style> 标签 的 顺序 保持 一 致 ， 且 <style> 
要 放 在 最 后 ， 因 为 另外 两 个 标签 至 少 要 有 一 个 。 


不 好 的 例子 : 

861 <style>/* ... */</style> 
@2 <script>/* ... */</script> 
63 <template>...</template> 
04 <!-- ComponentA.vue --> 

@5 <script>/* ... */</script> 
86 <template>...</template> 
87 《style>/# ... */</style> 
68 

69  《!-- ComponentB.vue --> 

10 <template>...</template> 
11 <script>/* ... */</script> 
12 <style>/* ... */</style> 
各 个 组 件 之 间 的 顶级 元 素 顺序 应 该 保持 一 致 。 
推荐 的 例子 : 

61 <!-- ComponentA.vue --> 

@2 <script>/* ... */</script> 
63 <template>...</template> 
864 <style>/* ... */</style> 
85 

866 <!-- ComponentB.vue --> 

67 <script>/* ... */</script> 


08 <template>...</template> 
89 <style>/* ... */</style> 
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16 <!-- ComponentA.vue --> 

11 <template>...</template> 
12 <script>/* ... */</script> 
13 <style>/* ... */</style> 
14 

15 <!-- ComponentB.vue --> 

16 <template>...</template> 
17 <script>/* ... */</script> 
18 «<style>/* ... */</style> 


17.18 ”总结 


最 佳 实践 可 以 规避 错误 ， 同 时 大 幅 提 升 应 用 的 性 能 。17.1~17.9 节 重 点 介绍 了 使 用 Vuejs 开 


发 项 目的 最 佳 实践 ， 包 括 : 

口 为 列表 泻 染 设置 属性 key; 

口 在 v-if/v-if-else/v-else 中 使 用 key; 
口 如 何 解 决 路 由 切换 组 件 不 变 的 问题 ; 

口 如 何 为 所 有 路 由 统一 添加 query; 

口 区 分 Vuex 与 props 的 使 用 边界 

口 避免 v-if 和 v-for 一 起 使 用 
口 为 组 件 样式 设置 作用 域 

口 避免 在 scoped 中 使 用 元 素 选择 器 
口 避免 隐 性 的 父子 组 件 通信 


风格 规范 可 以 规避 小 纠结 与 反 模 式 ， 同 时 能 在 绝 大 多 数 工程 中 改善 可 读 性 和 开发 体验 。 


17.10~17.17 节 重 点 介绍 了 一 些 风 格 规 范 ， 包 括 : 


口 单 文件 组 件 如 何 命名 ; 
口 自 闭合 组 件 ; 

口 prop 名 的 大 小 写 ; 

口 多 个 特性 的 元 素 ; 

D 模板 中 简单 的 表达 式 ; 
口 简单 的 计算 属性 ; 

口 指令 缩写 ; 
口 良好 的 代码 顺序 。 


遵循 这 些 规范 能 够 在 绝 大 多 数 工程 中 改善 可 读 性 和 开发 体验 。 当 风格 规范 同时 存在 多 个 同样 
好 的 选项 时 , 选择 任意 一 个 都 可 以 确保 一 致 性 。 在 项 目 中 选择 统一 的 规则 并 尽 可 能 与 社区 保持 统 


一 是 一 个 好 选择 。 接 受 社区 的 规范 标准 将 得 到 以 下 好 处 。 

口 训练 大 脑 ， 容 易 处 理 在 社区 遇 到 的 代码 。 

口 不 做 修改 就 可 以 直接 复制 粘贴 社区 的 代码 示例 。 

口 能 够 经 常 招 聘 到 和 你 编码 习惯 相同 的 新 人 ， 至 少 跟 Vuejs 相关 的 东西 是 这 样 的 。 


% 


微 信 连接 


回复 “前 端 ”查看 相关 书 单 


微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 | 好 书 


全 


QQ 连接 


到 


灵 读 者 官方 群 I: 218139230 
灵 读 者 官方 群 I: 164939616 


网 


图 灵 社 区 
iTuring.cn 
在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , 图 灵 访 谈 


深入 浅 出 
VueJs 


本 书 如 询 丁 解 牛 般 地 分 析 了 Vue.js 的 源码 ， 深 入 框架 设计 原理 而 又 用 浅显 易 懂 的 方式 讲 
解 出 来 ， 值 得 所 有 前 端 同学 一 读 再 读 。 


何 烁 
360 导 航 事 业 部 技术 负责 人 


了 解 源码 不 是 必需 的 ， 却 是 必要 的 。 在 遇 到 疑难 杂 症 的 时 候 ， 它 能 帮助 我 们 有 条 不 
妹 地 分 析 问 题 ， 而 不 是 靠 猜 测 或 是 搜索 别人 的 方案 去 解决 问题 。 本 书 将 Vue.js 内 部 的 各 
个 模块 及 API 的 原理 讲解 得 很 透彻 ， 深 入 浅 出 ， 由 点 及 面 ， 其 内 容 适 合 各 个 层次 的 前 端 
开发 者 。 我 相信 如 果 你 认真 阅读 了 这 本 书 的 内 容 ， 一 定 会 对 Vue.js 的 理解 更 为 深入 ， 解 
决 问题 也 将 变 得 游 妨 有 余 。 
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